我正在尝试在我的项目中创建一个bootstrap应用程序。
在我的示例中，我想要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;
}
感谢您的帮助！
答案 0 :(得分：0)
创建一个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;
}
答案 1 :(得分：0)
你的第二排在你的第一排;它们是嵌套的。你还有一个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>
答案 2 :(得分：0)
确实没有太多需要嵌套行。我们可以删除那些未使用的类和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>
答案 3 :(得分：0)
这是：
您需要在正确的位置创建列，并且还需要正确放置行。包装上的Bootstrap使用类名`容器。
您还需要使用结构：
<div class="row">
<div class="col-xs-12">
<div class="row">
如果在父col上是子cols，则需要将它包装在intro row class中。