1. 首頁
  2. 問答
  3. 我怎樣才能讓這些引導列堆疊在一起？

我怎樣才能讓這些引導列堆疊在一起？

2016-02-09 77 views
3

我正在製作一個包含大小爲6列的面板的小抄，它們都是同一行的一部分。我怎樣才能讓這些引導列堆疊在一起？

我遇到的問題是我想讓行中的第三列直接位於第一列的下方。

相反，它表現得「正常」並形成第二個對齊的行，其中前兩個元素和下面的行之間存在間隙。

enter image description here

我怎樣才能得到第三面板齊平反對它上面的面板？

來源

2016-02-09 Matthew Rathbone

+0

引導不安排這樣的列，但您可以使用[砌體（http://masonry.desandro.com/extras.html）來實現這一目標。請參閱此示例> http：// stackoverflow。com/questions/34953248 /砌體與側欄引導/ 34955089＃34955089 – vanburen

+0

爲什麼不讓兩列包含兩行而不是兩行包含兩列？ –

回答

0

這是不可能使用twitter bootstrap的網格系統。網格使用CSS浮動和右上浮動元素不會讓第二行的列坐在第一行的內聯。你想要的東西可以用JavaScript庫來完成，它提供了一個系統，無論大小和數量如何，元素都可以填充空格。

我想你可以用masonry grid system來滿足需要。

來源

2016-02-09 04:49:05

+0

石工網格可能不可能，但OP要求的簡單佈局是;請參閱http://stackoverflow.com/a/35318158/227299 –

0

隨着你現在的HTML DOM結構，你想要什麼是不可能的。但是，如果一點點修改DOM，則可以實現期望的結果。我在這裏做了一個sample。

請看看在新舊分別代碼：

HTML：

<div class="container"> 
    <div class="row"> 
     <h4> 
      OLD 
     </h4> 
     <div id="div1" class="cols col-xs-6"> 
      <h2> 
       Div 1 
      </h2> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
     </div> 

     <div id="div2" class="cols col-xs-6"> 
      <h2> 
       Div 2 
      </h2> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
     </div> 

     <div id="div3" class="cols col-xs-6"> 
      <h2> 
       Div 3 
      </h2> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
     </div> 

     <div id="div4" class="cols col-xs-6"> 
      <h2> 
       Div 4 
      </h2> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
     </div> 

    </div> 
</div> 


<div class="sep"> 

</div> 



<div class="container"> 
    <div class="row"> 
     <h4> 
      NEW 
     </h4> 
     <div class="cols col-xs-6"> 
      <h2> 
       Div 1 
      </h2> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
     </div> 

     <div class="cols col-xs-6"> 
      <h2> 
       Div 2 
      </h2> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 

     </div> 

     <div class="cols col-xs-6"> 
      <h2> 
       Div 3 
      </h2> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
     </div> 

     <div class="cols col-xs-6"> 
      <h2> 
       Div 4 
      </h2> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
      <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 

     </div> 

    </div> 
</div>

CSS：

.cols { 
    border: 1px solid red; 
} 

.sep{ 
    border: 2px solid; 
    margin: 20px 0; 
}

來源

2016-02-09 05:36:43 Shashank

+1

你應該用文字解釋修改是什麼;我們必須在閱讀過多的代碼時才能解釋你在一句話中做了什麼 –

0

由於@Farzad YZ說，引導不會做這種安排，但有很多基於JavaScript的插件，這將有助於喲你實現你的目標。我建議你這樣：http://salvattore.com/

這個插件完美的作品與響應概念

來源

2016-02-10 14:25:24 fablexis

2

您可以列內的行，而不是行內的列。請參閱https://jsfiddle.net/mendesjuan/89t1g002/1/

<div class="row"> 
    <div class="col-md-6"> 
    <div class="panel">Content </div> 
    <div class="panel">Content </div> 
    </div> 
    <div class="col-md-6"> 
    <div class="panel">Content</div> 
    <div class="panel">Content</div> 
    </div> 
</div>

來源

2016-02-10 14:40:22

+0

因此看起來這是真正實現它的唯一方法。我希望能夠在頁面上扔出一堆面板並讓它們正確堆疊，但這是我最終做的。 –

+0

任何你沒有接受答案的理由？ –

0

另一個（可能很簡單）選項將嵌套您的列和行。見Grid Nesting。您可以使用兩個col-sm-6作爲您的主要列，然後根據需要放置多個新列，每列都有多個col-sm-12列。

查看示例代碼段。

body { 
 
    padding-top: 50px; 
 
} 
 
code { 
 
    border-radius: 3px 
 
} 
 
.bs-callout+.bs-callout { 
 
    margin-top: -5px 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <section class="col-sm-6"> 
 

 
     <div class="row"> 
 
     <section class="col-sm-12"> 
 

 
      <div class="panel panel-default"> 
 
      <div class="panel-heading">Lorem Ipsum is simply dummy text of <b>ONE</b> 
 
      </div> 
 
      <div class="panel-body"> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetti.</p> 
 
      </div> 
 

 
      <table class="table table-striped"> 
 
       <tbody> 
 
       <tr> 
 
        <td><code>To switch directories, type</code> 
 
        </td> 
 
        <td>To switch directories, type</td> 
 
       </tr> 
 
       <tr> 
 
        <td><code>To switch directories, type</code> 
 
        </td> 
 
        <td>List files matching a pattern</td> 
 
       </tr> 
 
       </tbody> 
 
      </table> 
 
      </div> 
 

 
     </section> 
 

 
     <section class="col-sm-12"> 
 

 
      <div class="panel panel-default"> 
 
      <div class="panel-heading">Lorem Ipsum is simply dummy text of <b>TWO</b> 
 
      </div> 
 
      <div class="panel-body"> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p> 
 
      </div> 
 

 
      <table class="table table-striped"> 
 
       <tbody> 
 
       <tr> 
 
        <td><code>To switch directories, type</code> 
 
        </td> 
 
        <td>To switch directories, type</td> 
 
       </tr> 
 
       <tr> 
 
        <td><code>To switch directories, type</code> 
 
        </td> 
 
        <td>List files matching a pattern</td> 
 
       </tr> 
 
       <tr> 
 
        <td><code>To switch directories, type</code> 
 
        </td> 
 
        <td>To switch directories, type</td> 
 
       </tr> 
 
       <tr> 
 
        <td><code>To switch directories, type</code> 
 
        </td> 
 
        <td>List files matching a pattern</td> 
 
       </tr> 
 
       <tr> 
 
        <td><code>To switch directories, type</code> 
 
        </td> 
 
        <td>To switch directories, type</td> 
 
       </tr> 
 
       </tbody> 
 
      </table> 
 
      </div> 
 

 
     </section> 
 

 
     <section class="col-sm-12"> 
 

 
      <div class="panel panel-default"> 
 
      <div class="panel-heading">Lorem Ipsum is simply dummy text of <b>THREE</b> 
 
      </div> 
 
      <div class="panel-body"> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard .</p> 
 
      </div> 
 

 
      <table class="table table-striped"> 
 
       <tbody> 
 
       <tr> 
 
        <td><code>To switch directories, type</code> 
 
        </td> 
 
        <td>To switch directories, type</td> 
 
       </tr> 
 
       <tr> 
 
        <td><code>To switch directories, type</code> 
 
        </td> 
 
        <td>To switch directories, type</td> 
 
       </tr> 
 
       <tr> 
 
        <td><code>To switch directories, type</code> 
 
        </td> 
 
        <td>To switch directories, type</td> 
 
       </tr> 
 
       <tr> 
 
        <td><code>To switch directories, type</code> 
 
        </td> 
 
        <td>To switch directories, type</td> 
 
       </tr> 
 
       <tr> 
 
        <td><code>To switch directories, type</code> 
 
        </td> 
 
        <td>To switch directories, type</td> 
 
       </tr> 
 
       </tbody> 
 
      </table> 
 
      </div> 
 

 
     </section> 
 

 
     </div> 
 
    </section> 
 

 
    <section class="col-sm-6"> 
 

 
     <div class="row"> 
 

 
     <section class="col-sm-12"> 
 

 
      <div class="panel panel-default"> 
 
      <div class="panel-heading">Lorem Ipsum is simply dummy text of <b>FOUR</b> 
 
      </div> 
 
      <div class="panel-body"> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p> 
 
      </div> 
 

 
      <table class="table table-striped"> 
 
       <tbody> 
 
       <tr> 
 
        <td><code>To switch directories, type</code> 
 
        </td> 
 
        <td>To switch directories, type</td> 
 
       </tr> 
 
       <tr> 
 
        <td><code>To switch directories, type</code> 
 
        </td> 
 
        <td>To switch directories, type</td> 
 
       </tr> 
 
       <tr> 
 
        <td><code>To switch directories, type</code> 
 
        </td> 
 
        <td>To switch directories, type</td> 
 
       </tr> 
 
       </tbody> 
 
      </table> 
 
      </div> 
 

 
     </section> 
 

 
     <section class="col-sm-12"> 
 

 
      <div class="panel panel-default"> 
 
      <div class="panel-heading">Lorem Ipsum is simply dummy text of <b>FIVE</b> 
 
      </div> 
 
      <div class="panel-body"> 
 
       <p>Lorem Ipsum is simply dummy tex.</p> 
 
      </div> 
 

 
      <table class="table table-striped"> 
 
       <tbody> 
 
       <tr> 
 
        <td><code>To switch directories, type</code> 
 
        </td> 
 
        <td>To switch directories, type</td> 
 
       </tr> 
 
       <tr> 
 
        <td><code>To switch directories, type</code> 
 
        </td> 
 
        <td>To switch directories, type</td> 
 
       </tr> 
 
       <tr> 
 
        <td><code>To switch directories, type</code> 
 
        </td> 
 
        <td>To switch directories, type</td> 
 
       </tr> 
 
       <tr> 
 
        <td><code>To switch directories, type</code> 
 
        </td> 
 
        <td>To switch directories, type</td> 
 
       </tr> 
 
       <tr> 
 
        <td><code>To switch directories, type</code> 
 
        </td> 
 
        <td>To switch directories, type</td> 
 
       </tr> 
 
       </tbody> 
 
      </table> 
 
      </div> 
 

 
     </section> 
 

 
     <section class="col-sm-12"> 
 

 
      <div class="panel panel-default"> 
 
      <div class="panel-heading">Lorem Ipsum is simply dummy text of <b>SIX</b> 
 
      </div> 
 
      <div class="panel-body"> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p> 
 
      </div> 
 

 
      <table class="table table-striped"> 
 
       <tbody> 
 
       <tr> 
 
        <td><code>To switch directories, type</code> 
 
        </td> 
 
        <td>To switch directories, type</td> 
 
       </tr> 
 
       <tr> 
 
        <td><code>To switch directories, type</code> 
 
        </td> 
 
        <td>To switch directories, type</td> 
 
       </tr> 
 
       <tr> 
 
        <td><code>To switch directories, type</code> 
 
        </td> 
 
        <td>To switch directories, type</td> 
 
       </tr> 
 
       <tr> 
 
        <td><code>To switch directories, type</code> 
 
        </td> 
 
        <td>To switch directories, type</td> 
 
       </tr> 
 
       <tr> 
 
        <td><code>To switch directories, type</code> 
 
        </td> 
 
        <td>To switch directories, type</td> 
 
       </tr> 
 
       <tr> 
 
        <td><code>To switch directories, type</code> 
 
        </td> 
 
        <td>To switch directories, type</td> 
 
       </tr> 
 
       </tbody> 
 
      </table> 
 
      </div> 
 

 
     </section> 
 

 
     </div> 
 
    </section> 
 

 
    </div> 
 
</div>

來源

2016-02-11 16:10:49 vanburen

相關問題

 相關問題