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列），将发生包装

如果在一行中放置了超过12列，则每组都有   额外的列将作为一个单元包裹到一个新行上。

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}类，因此布局仍然适用于嵌入式代码段的窄视口大小。

＆＃13;

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

＆＃13;

Answer 2

我认为这是最简单的方法。

#row {
    overflow: hidden; /*allows div to have children that float*/
}
#first {
    float:left;
    border: 1px solid red;   /*allows you to see the div*/
}
#second {
    border: 1px solid green; /*allows you to see the div*/
    float:left;
}

<div id="row">
    <div id="first">part1</div>
    <div id="second">part2</div>
</div>

元素并排连续

2 个答案: