html - 在 bootstrap 的 div 中安排 Div

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>

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

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

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

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