Question

在Bootstrap 4中，我有三个div：

<div class="row">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

有没有办法，没有将div B和C放在另一个div 中，以达到这个目的：

A  B
   C

Answer 1

有没有办法，没有将div B和C放在另一个div 中，以达到这个目的：

A  B
   C

是的，你可以通过使用像这样的偏移类来实现这个目的：

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col-6">A</div>
        <div class="col-6">B</div>
        <div class="col-6 offset-6">C</div>
    </div>
</div>

＆＃13;

注意：在上面显示的示例中，列类和偏移类没有响应。要使它们具有响应性，您需要添加适当的中缀。

参考：

https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns

https://getbootstrap.com/docs/4.0/layout/grid/#responsive-classes

现在说div A是600px高度，B和C都是50px高度。我不想让A推倒C。我希望C走到正下方B.现在怎么办？

在这种情况下，您希望使用d-block clearfix和float-left + float-right类，如下所示：

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
<div class="container">
    <div class="row d-block clearfix">
        <div class="col-6 float-left bg-warning" style="height: 100px">A</div>
        <div class="col-6 float-right">B</div>
        <div class="col-6 float-right">C</div>
    </div>
</div>

＆＃13;

在这种情况下，d-block从默认的flexbox切换到＆＃34; display：block＆＃34;对于行，float-left / float-right类告诉列浮动的位置。

参考：

http://getbootstrap.com/docs/4.0/utilities/float/

https://getbootstrap.com/docs/4.0/utilities/clearfix/

Answer 2

你可以做的是将一个类分配给A并将一个float-left放在css中，然后它只是一个边距等问题。

<div class="row">
   <div class="left">A</div>
   <div>B</div>
   <div>C</div>
</div>

Css代码

.left{
float:left;
}

Bootstrap 4 - 3 divs，1 left，2 right

2 个答案: