html - 反向拉动-* - Bootstrap 4

标签 html css twitter-bootstrap-4

<分区>

向右拉或向左拉不起作用,我做错了什么?

代码本身

<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">
    <section class="col-sm-9 pull-right" style="background: olive;">
      <article>content</article>
    </section>

    <section class="col-sm-3 pull-left" style="background: #008040;">
      <aside>Widgets</aside>
    </section>
  </div>
</div>

最佳答案

Bootstrap 4中没有pull-rightpull-left
它不再使用 float,而是使用 flex。

你有两个 div,你试图通过使用 float 来改变它们的顺序,你可以简单地反转它们在 HTML 中的位置:

<section class="col-sm-3" style="background: #008040;">
    <aside>Widgets</aside>
</section>
<section class="col-sm-9" style="background: olive;">
    <article>content</article>
</section>

如果你想保留它们在 HTML 中的位置并反转它们,你可以使用 flex-order:

<section class="col-sm-3 order-1" style="background: #008040;">
    <aside>Widgets</aside>
</section>
<section class="col-sm-9 order-0" style="background: olive;">
    <article>content</article>
</section>

文档:https://getbootstrap.com/docs/4.0/layout/grid/

关于html - 反向拉动-* - Bootstrap 4,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49055668/

上一篇:html - 如何使用 CSS 添加拉伸(stretch)网页宽度的背景图像?

下一篇:html - css - 纯 css 响应式菜单

相关文章:

html - 独立元素宽度

javascript - 如何使用 JavaScript 根据季节更改 CSS

css - 如何在 bootstrap 4 中更改卡片 block 的不透明度

twitter-bootstrap - 内联形式的输入宽度 - Bootstrap 4

html - Materialise 中的标签覆盖问题

HTML 边距问题

javascript - 无法接收当前日期

html - 当前元素的 CSS 内容属性

twitter-bootstrap - 在网格中 Bootstrap 4 新行空间

javascript - 如何将 Web 组件分离到单个文件并加载它们?