html - 并排排列的元素

Question

我有以下内容

 <section class="page-element col-md-9 col-lg-7">
             <div class="page-element">part1</div>
        </section>

我想添加另一个部分与第 1 部分在同一行

我试过了，但它所做的是将 part2 的行放在 part1 下面，而不是并排放置

<div class="row">
        <section class="page-element col-md-9 col-lg-7">
             <div class="page-element">part1</div>
        </section>

        <section class="page-element col-md-12 col-lg-12">
            <div class="page-element">part2</div>
        </section>

我做错了什么？

Answer 1

Bootstrap 的网格系统包含12 列，这意味着当您的布局超过12 列时(col-md-9 和col-md-12 例如，最多添加 21 列)，然后将发生换行

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

Source

一个可视化的例子如下:

+--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+
| 1| | 2| | 3| | 4| | 5| | 6| | 7| | 8| | 9| |10| |11| |12|
+--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+

+------------------------------------------+ 
| col-md-9                                 | 
+------------------------------------------+ 

+---------------------------------------------------------+
| col-md-12                                               |
+---------------------------------------------------------+

您必须确保元素的列跨度加起来不超过 12，以便它们并排显示(即防止换行):

+--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+
| 1| | 2| | 3| | 4| | 5| | 6| | 7| | 8| | 9| |10| |11| |12|
+--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+

+------------------------------------------+ +------------+
| col-md-9                                 | | col-md-3   |
+------------------------------------------+ +------------+

在下面的示例中，我已经调整了第二部分的列跨度，以便它们的总和很好地达到 12，相对于其前一个兄弟的相同列类。我添加了 col-xs-{n} 和 col-sm-{n} 类，这样布局仍然适用于嵌入式代码片段的窄视口(viewport)尺寸。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/>
<div class="row">
  <section class="page-element col-xs-9 col-sm-9 col-md-9 col-lg-7">
    <div class="page-element">part1</div>
  </section>

  <section class="page-element col-xs-3 col-sm-3 col-md-3 col-lg-5">
    <div class="page-element">part2</div>
  </section>
</div>