如何使用 Bootstrap 4 重新排序列？答案

【问题标题】：How to Reorder Columns with Bootstrap 4?如何使用 Bootstrap 4 重新排序列？
【发布时间】：2018-06-22 14:52:06
【问题描述】：

我在 bootstrap 4 中使用了以下标签。

    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-3">
                <div class="right-user-account" >
                    <a href="#">User Account</a>
                </div>
            </div>

            <div class="col-md-6">
                <img src="images/logo.png">
            </div>

            <div class="col-md-3">
                <div class="left-login" >
                    <a href="#">Login</a>
                </div>
            </div>
        </div>
    </div>

我想与徽标全角

如何使用重新排序命令？

【问题讨论】：

标签： twitter-bootstrap flexbox bootstrap-4

【解决方案1】：

Bootstrap 4 使用 flex/flexbox。所以是的，您可以选择对元素/列进行排序。

我认为您想要的只是将 order-{number} 的 Bootstrap-4 类与您的 col 类一起使用。

解决方法如下：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row align-items-center">
  
    <div class="col-md-3 col order-2 order-sm-1">
      <div class="right-user-account">
        <a class="fd-head-login" href="#">
          <i class="fa fa-caret-down"></i>User Account</a>
      </div>
    </div>
    
    <div class="col-md-6 text-center col-md-6 order-1 order-sm-2">
      <a href="#">
        <img src="images/logo.png">
      </a>
    </div>

    <div class="col-md-3 order-3">
      <div class="left-login">
        <a class="fd-head-login" href="#">Login<i class="fa fa-user"></i></a>
      </div>
    </div>
    
  </div>
</div>

您可以找到更多here。

Codepen link to playaround screen widths

希望这个答案对你有所帮助！

【讨论】：

谢谢。它不起作用。我用过'Bootstrap v4.0.0-alpha.6'。是这个问题吗？
是的，bootstrap 4 alpha 没有弹性盒子而且不稳定。
你可以在这里查看blog.getbootstrap.com/2017/08/10/bootstrap-4-beta Bootstrap 4 Beta 有 flexbox 而不是任何以前的版本。
谢谢。我下载了 bootstrap 4 beta 并用 v4.0.0-alpha.6 移动了它。但是上面的代码没有正确执行

【解决方案2】：

您可以使用引导程序的重新排序选项
https://getbootstrap.com/docs/4.0/layout/grid/#reordering

【讨论】：