在引导程序的 div 中排列 Div

Question

我正在引导的帮助下创建一个网站结构。

问题是在 3 个主div 标签中排列 1 个div 标签时，它们没有并排排列。 他们自己被安排在另一个下面。

<div class="col-md-12 collapse" style="border:1px solid blue;" id="part1">
<div class="col-md-4" style="border:1px solid green;"><h5>Part 1.1</h5></div>
<div class="col-md-4" style="border:1px solid green;"><h5>Part 1.2</h5></div>
<div class="col-md-4" style="border:1px solid green;"><h5>Part 1.3</h5></div>
</div>

我想将 3 个div 标签一个并排排列。

Answer 1

您需要在列周围环绕row。

<div class="col-md-12 collapse border-solid border-blue" id="part1">
<div class="row">
<div class="col-md-4 border-solid border-green"><h5>Part 1.1</h5></div>
<div class="col-md-4 border-solid border-green"><h5>Part 1.2</h5></div>
<div class="col-md-4 border-solid border-green"><h5>Part 1.3</h5></div>
</div>
</div>

请不要使用内联 css，请考虑添加类。

.border-solid {
border-style: solid;
border-width: 1px;
}
.border-blue {
border-color: blue;
}
.border-green {
border-color: green;
}

Answer 2

删除折叠

<div class="col-md-12" style="border:1px solid blue;" id="part1">
<div class="col-md-4" style="border:1px solid green;"><h5>Part 1.1</h5></div>
<div class="col-md-4" style="border:1px solid green;"><h5>Part 1.2</h5></div>
<div class="col-md-4" style="border:1px solid green;"><h5>Part 1.3</h5></div>
</div>

Answer 3

.col-md-4 {
display: inline-block;
}

斯菲德尔

Answer 4

<div style="width: 100%;">
<div style="float:left; width: 20%">left<hr width="1" size="500">
</div>
<div style="float:none;">middle<hr width="1" size="500">
</div>
<div style="float:right;">right
</div>