如何用Bootstrap設置多個元素的寬度？

Question

我想在我的項目中創建一個引導程序應用程序。

在我的例子中，我想要3個黃色的列寬度匹配3個綠色列的寬度。我該怎麼做？

html: 
<div id="main"> 
    <div class="row"> 
     <div id="title-wrapper" class="col-xs-8">    
      <div id="wrapper1"> 
       <div class="row"> 
        <div class="first-table col-xs-3"> 
         title-col-1 
        </div> 
        <div class="first-table col-xs-3"> 
         title-col-2 
        </div> 
        <div class="first-table col-xs-3"> 
         title-col-3 
        </div> 
       </div> 
      </div> 

      <div class="row"> 
       <div id="wrapper" class="col-xs-9"> 
        <div class="row"> 
         <div id="col1" class="col-xs-3"> 
          <p>Col 1</p> 
          <p>Col 1</p> 
         </div> 
         <div id="col2" class="col-xs-3"> 
          <p>Col 2</p> 
          <p>Col 2</p> 
         </div> 
         <div id="col3" class="col-xs-3"> 
          <p>Col 3</p> 
          <p>Col 3</p> 
          <p>Col 3</p> 
          <p>Col 3</p> 
          <p>Col 3</p> 
         </div> 
        </div>  
       </div> 
      </div> 
     </div> 
     <div id="second" class="col-xs-4"> 
      <p>second </p> 
     </div> 
    </div> 
</div> 

CSS 
#main{ 
    background-color:red; 
    height:300px; 
} 

#second{ 
    background-color:blue; 
} 

.first-table{ 
    background-color:green; 
    border:solid 1px black; 
} 

#wrapper{ 
    display:table; 
    width:100%; 
    position:absolute; 
} 

#col1, #col2, #col3{ 
    background:yellow; 
    border:solid 1px black; 
} 

JS小提琴。 http://jsfiddle.net/a1zpb8su/2/

感謝您的幫助！

Answer 1

製作一個CSS類，您可以使用一個公共寬度設置特定的元素。這將使您完全控制哪些元素具有相同的寬度。

HTML：

<div id="main"> 
    <div class="row"> 
     <div id="title-wrapper" class="col-xs-8">    
      <div id="wrapper1"> 
       <div class="row"> 
        <div class="first-table col-xs-3 match-width"> 
         title-col-1 
        </div> 
        <div class="first-table col-xs-3 match-width"> 
         title-col-2 
        </div> 
        <div class="first-table col-xs-3 match-width"> 
         title-col-3 
        </div> 
       </div> 
      </div> 

      <div class="row"> 
       <div id="wrapper" class="col-xs-9"> 
        <div class="row"> 
         <div id="col1" class="col-xs-3 match-width"> 
          <p>Col 1</p> 
          <p>Col 1</p> 
         </div> 
         <div id="col2" class="col-xs-3 match-width"> 
          <p>Col 2</p> 
          <p>Col 2</p> 
         </div> 
         <div id="col3" class="col-xs-3 match-width"> 
          <p>Col 3</p> 
          <p>Col 3</p> 
          <p>Col 3</p> 
          <p>Col 3</p> 
          <p>Col 3</p> 
         </div> 
        </div>  
       </div> 
      </div> 
     </div> 
     <div id="second" class="col-xs-4"> 
      <p>second </p> 
     </div> 
    </div> 
</div> 

---

CSS：

.match-width { 
    width: 100px; 
} 

Working Example

Answer 2

你有你的裏面你第一第二排;他們是嵌套的。您還有一個col設置爲col-xs-8，另一個設置爲col-xs-9。我讓他們都col-xs-8與col-xs-4

<div id="main"> 
    <div class="row"> 
     <div id="title-wrapper" class="col-xs-8">    
      <div id="wrapper1"> 
       <div class="row"> 
        <div class="first-table col-xs-3"> 
         title-col-1 
        </div> 
        <div class="first-table col-xs-3"> 
         title-col-2 
        </div> 
        <div class="first-table col-xs-3"> 
         title-col-3 
        </div> 
       </div> 
      </div> 


     </div> 
     <div id="second" class="col-xs-4"> 
      <p>second </p> 
     </div> 
    </div> 
    <!-- moved this row out of the other --> 
    <div class="row"> 
     <div id="wrapper" class="col-xs-8"> 
      <div class="row"> 
       <div id="col1" class="col-xs-3"> 
        <p>Col 1</p> 
        <p>Col 1</p> 
       </div> 
       <div id="col2" class="col-xs-3"> 
        <p>Col 2</p> 
        <p>Col 2</p> 
       </div> 
       <div id="col3" class="col-xs-3"> 
        <p>Col 3</p> 
        <p>Col 3</p> 
        <p>Col 3</p> 
        <p>Col 3</p> 
        <p>Col 3</p> 
       </div> 
      </div>  
     </div> 
    </div> 
</div> 

更新工作：如果你想保持他們的嵌套，使用此

<div id="main"> 
    <div class="col-xs-8"> 
     <div class="row"> 
      <div class="first-table col-xs-3">title-col-1</div> 
      <div class="first-table col-xs-3">title-col-2</div> 
      <div class="first-table col-xs-3">title-col-3</div> 
     </div> 
     <div class="row"> 
      <div id="col1" class="col-xs-3"> 
       <p>Col 1</p> 
       <p>Col 1</p> 
      </div> 
      <div id="col2" class="col-xs-3"> 
       <p>Col 2</p> 
       <p>Col 2</p> 
      </div> 
      <div id="col3" class="col-xs-3"> 
       <p>Col 3</p> 
       <p>Col 3</p> 
       <p>Col 3</p> 
       <p>Col 3</p> 
       <p>Col 3</p> 
      </div> 
     </div> 
    </div> 
    <div class="col-xs-4"> 
     <p>second </p> 
    </div> 
</div> 

Answer 3

實在沒有太大的需要有嵌套行。我們可以刪除那些未使用的類和ID。然後將second放置在第一行，並將其設爲div而不是p，因此它需要與您的標題相同的空間。同樣對於要同時設置爲col-xs-8相同的寬度，除了col-xs-8和col-xs-9

下面是變化：Fiddle here

<div id="main"> 
    <div class="row"> 
     <div id="title-wrapper" class="col-xs-8">    
      <div> 
       <div class="first-table col-xs-3"> 
        title-col-1 
       </div> 
       <div class="first-table col-xs-3"> 
        title-col-2 
       </div> 
       <div class="first-table col-xs-3"> 
        title-col-3 
       </div> 
      </div> 
     </div> 
     <div id="second" class="col-xs-4"> 
      <div>second </div> 
     </div>   
    </div> 
    <div class="row"> 
     <div class="col-xs-8"> 
      <div id="col1" class="col-xs-3"> 
       <p>Col 1</p> 
       <p>Col 1</p> 
      </div> 
      <div id="col2" class="col-xs-3"> 
       <p>Col 2</p> 
       <p>Col 2</p> 
      </div> 
      <div id="col3" class="col-xs-3"> 
       <p>Col 3</p> 
       <p>Col 3</p> 
       <p>Col 3</p> 
       <p>Col 3</p> 
       <p>Col 3</p> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 4

這就是：

你需要做出正確的地方列，並且行也需要正確放置。包裝上的Bootstrap使用類名稱容器。

還需要使用結構：

<div class="row"> <div class="col-xs-12"> <div class="row">

如果父母山坳是孩子的cols，你需要將它包裝前奏行類。

http://jsfiddle.net/a1zpb8su/24/