Question

我在bootstrap的帮助下创建了一个网站结构。

问题是在1个主div标签中安排3个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

您需要在列周围包裹<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>。

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

.border-blue {
    border-color: blue;
}

.border-green {
    border-color: green;
}

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

{{1}}

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

jsfiddle

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>

在div中将div安排在bootstrap中

4 个答案: