代码之家 › 专栏 › 技术社区 › Daniel Williams

使用引导程序在浮动div之后堆叠内容

twitter-bootstrap

Daniel Williams · 技术社区 · 6 年前

我用的是Bootstrap的 float-left 和 float-right

* {
  outline: 1px red solid;
  }

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="float-left">
  Div left
</div>
<div class="float-right">
  Div right
</div>

<div>
  New div
</div>

2 回复 | 直到 6 年前

Igor Ivancha 6 年前

在这种情况下,如果没有理由将浮动元素包装到引导网格类中 row col ,您需要将它们包装到bootstraps helper类中 clearfix

* {
  outline: 1px red solid;
  }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">


<div class="clearfix">
  <div class="float-left">
    Div left
  </div>
  <div class="float-right">
    Div right
  </div>
</div>

<div>
  New div
</div>

Udara Kasun 6 年前

你试过这样做吗?

* {
  outline: 1px red solid;
  }

.newdiv{
   display:block;
}

.cols{
   width:100%;     
}

.myrow{
   display:flex;
   margin-right: 0px !important;
   margin-left: 0px !important;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="myrow">
  <div class="cols">
    <div class="float-left">
      Div left
    </div>
    <div class="float-right">
      Div right
    </div>
  </div>

</div>

<div class="newdiv">
  New div
</div>

推荐文章

xajetin · 导航不更改滚动上的颜色

2 年前

Noor ul ain Ibrahim · 如何在一行中制作两个大小相同的按钮?

2 年前

Bryan Santos · 固定表头与引导

2 年前

Nicolas Berthier · Bootstrap 5基于内容的包装

2 年前

tym · 根据用户偏好显示字段

2 年前

Sheryar Khan · 如何仅使用html、css、bootstrap、javascript/jquery创建html页面?

2 年前

Pavel · 当验证DIV可见时,引导网格会移动

6 年前

Sam · 在标题中嵌入Bootstrap 3导航栏

6 年前

Alexander David · 折叠卡打开,然后立即再次关闭

6 年前

Sandeep Bhardwaj · div的一致行为,与设备分辨率无关

6 年前