列內的列不能填滿寬度

我已經搜索了一個解決方案，但找不到任何..列內的列不能填滿寬度

我使用Bootstrap和列內有列，但它像我一樣接縫遺漏了什麼。查看的jsfiddle的例子，以獲得更多信息：

<div class="row"> 
    <div class="yellow col-xs-4"> 

    </div> 
    <div class="green col-xs-4"> 

    </div> 

    <div class="orange col-xs-4"> 

    </div>

如何獲得.problem列，以適應這樣的結束了...（充分寬）

<div class="height grey col-xs-8">   
     <div class="yellow col-xs-4 problem">problem</div> 
     <div class="green col-xs-4 problem">problem</div> 
    </div> 
    <div class="height grey col-xs-4"> 
     <div class="orange col-xs-4 problem">problem</div> 
    </div> 
</div>

來源

2014-02-27 Plexus81

您需要將列嵌套在div.row的其他列內。另外，在嵌套列時，您仍然在使用父級內部的12列流體網格。下面是更新標記：

<div class="container"> 
    <div class="row"> 
     <div class="yellow col-xs-4">   
     </div> 
     <div class="green col-xs-4"> 
     </div> 
     <div class="orange col-xs-4"> 
     </div> 
    </div> 
    <div class="row">  
     <div class="height grey col-xs-8"> 
      <div class="row"> 
       <div class="yellow col-xs-6 problem">problem, this column should have the same width as over</div> 
       <div class="green col-xs-6 problem">problem, this column should have the same width as over</div> 
      </div> 
     </div> 
     <div class="height grey col-xs-4"> 
      <div class="row"> 
       <div class="orange col-xs-12 problem">problem, this column should have the same width as over</div> 
      </div> 
     </div> 
    </div> 
</div>

基本上就是在這裏所做的是將嵌套rows，包含了裏面列每列，並適當地改變col-xs-#列階級的價值觀裏，使每個父容器加起來是12列。看起來你應該多花一點時間熟悉流體網格以及網格內嵌套網格的工作原理。

JSFiddle

Official Bootstrap CSS documentation for nesting grid elements

編輯：更新的jsfiddle並添加.container包裝div

來源

2014-02-27 19:07:44 Ennui

我怎麼會得上擺脫微胖的「綠色COL-XS-6問題」列？我想要有3個相同的列。 – Plexus81

你是什麼意思？它們都有相同的填充。如果你在談論邊界，這是由於一些CSS類有邊界，其他的不是......只是刪除所有的邊界。 – Ennui

底部和頂部的所有3個元素都是相同的寬度，相同的填充（刪除CSS中的所有'邊框'樣式，你明白我的意思）。但'.row'元素的左邊和右邊有'-15px'的'margin'，這使得中間的元素看起來更大，因爲左邊和右邊的padding離開了屏幕。我通常不使用Bootstrap，但我認爲這是由於缺少適當的容器元素。 – Ennui

http://jsfiddle.net/52VtD/3172/

即使是嵌套的列也應該總和爲12.將嵌套列包裝在自己的行div中是個好主意，儘管它可能不是c完全必要。

<div class="row"> 
    <div class="yellow col-xs-4"> 

    </div> 
    <div class="green col-xs-4"> 

    </div> 

    <div class="orange col-xs-4"> 

    </div>   
<br/>   
    how to I get the problem colums to fit like those over.. 
    <div class="height grey col-xs-8"> 
     <div class="row"> 
      <div class="yellow col-xs-6 problem">problem, this column should have the same width as over</div> 
      <div class="green col-xs-6 problem">problem, this column should have the same width as over</div> 
     </div> 
    </div> 
    <div class="height grey col-xs-4"> 
     <div class="row"> 
      <div class="orange col-xs-12 problem">problem, this column should have the same width as over</div> 
     </div> 
    </div> 
</div>

來源

2014-02-27 19:05:33

對於全寬度，嵌套列應加12。

<div class="height grey col-xs-12">   
    <div class="yellow col-xs-4 problem">problem, this column should have the same width as over</div> 
    <div class="green col-xs-4 problem">problem, this column should have the same width as over</div> 
    <div class="orange col-xs-4 problem">problem, this column should have the same width as over</div> 
</div>

來源

2014-02-27 19:07:04 kushpf

列內的列不能填滿寬度

回答

相關問題