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

Question

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

我想要全宽的标志

如何使用重新排序命令？

Answer 1

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

我认为您想要的只是在order-{number}您的col课程中使用 Bootstrap-4类。

下面是解决方案：

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

您可以在此处找到更多信息。

Codepen 链接到播放屏幕宽度

希望这个回答对你有帮助！