Bootstrap將div內容換成新行

不知何故，我無法弄清楚如何完成我的代碼，我將它格式化爲一個列表，並且需要將它格式化爲也是由javascript切換的網格。下面Bootstrap將div內容換成新行

我的HTML代碼用於列表一個內容

<div class="list"> 
    <div class="row"> 
     <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">Right is next DIV</div> 
     <div class="col-lg-6 col-md-6 col-sm-5 col-xs-12">Right is next DIV</div> 
     <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">I am the last DIV</div> 
    </div> 
</div>

對列表中的CSS代碼。所有其他的CSS採取的是引導

.styled_view div.list { 
    padding: 0; 
    width: 100%; 
}

相同的代碼應該可以用來顯示電網

<div class="grid"> 
    <div class="row"> 
     <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">Under me should be a DIV</div> 
     <div class="col-lg-6 col-md-6 col-sm-5 col-xs-12">Under me should be a DIV</div> 
     <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">I am the last DIV</div> 
    </div> 
</div>

網格

.styled_view div.grid { 
    display: inline-block; 
    overflow: hidden; 
    vertical-align: top; 
    width: 19.4%; 
}

的19.4％，各個部分的CSS畫廊保持旁邊的DIVs。它不會將其推向新的界限。我怎麼解決它？

來源

2014-04-08 karadayi

哪裏.styled_view？或.gallery？你可以發佈我們可以運行的東西嗎？ – LOTUSMS

編輯：這可能不是你的問題的來源，但你使用'col- *'是不正確的。例如，'col-lg-3 col-md-3 col-sm-3 col-xs-12'應該是'col-sm-3'。您只需要將一個'col- *'規則應用於單個元素。 –

可能這會給你一個想法：http://bootsnipp.com/snippets/featured/list-grid-view – Jayesh

做一行div。

像這樣

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"> 
 
<div class="grid"> 
 
    <div class="row"> 
 
     <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 bg-success">Under me should be a DIV</div> 
 
     <div class="col-lg-6 col-md-6 col-sm-5 col-xs-12 bg-danger">Under me should be a DIV</div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 bg-warning">I am the last DIV</div> 
 
    </div> 
 
</div>

來源

2014-04-08 16:51:46

Bootstrap將div內容換成新行

回答

相關問題