Html 如何使用引导设置多个元素的宽度？

我正在尝试在我的项目中创建一个引导应用程序

在我的示例中，我希望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小提琴。

---

谢谢你的帮助

创建一个CSS类，您可以使用一个公共宽度设置特定元素。这将使您能够完全控制哪些元素具有相同的宽度

HTML:

---

你的第二排在第一排里面；它们是嵌套的。您还将一个col设置为col-xs-8，另一个设置为col-xs-9。我让它们都使用col-xs-8和col-xs-4

更新：如果要使它们嵌套，请使用此选项

<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>

---

实际上不太需要嵌套行。我们只需要删除那些未使用的类和id。然后将第二个放置在第一行中，并将其设为div，而不是p，这样它将占用与标题相同的空间。同样，对于要同时设置为col-xs-8（col-xs-8和col-xs-9除外）的相同宽度

以下是变化：

这是：

您需要使列位于正确的位置，并且行也需要正确放置。包装引导使用类名`容器

您还需要使用以下结构：

如果父列上的子列是cols，则需要将其包装为intro row类

---

谢谢，但一旦你将宽度设置为100px，它就不会响应。这不适用于响应。主题作者不要使用正确的引导程序来实现此功能：

.match-width {
    width: 100px;   
}

<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>

<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>