如何在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>

我想让标志和全宽一样

如何使用重新排序命令？

- Mostafa Norzade

Answer 1

Bootstrap 4使用flex/flexbox。因此，您可以按元素/列的顺序进行排序。

我认为您想要的是仅使用Bootstrap-4类order-{number}与您的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>

您可以在这里找到更多信息：https://getbootstrap.com/docs/4.0/layout/grid/#reordering。

Codepen 链接以测试不同屏幕宽度

希望这个回答能帮到您！

- divy3993

---

谢谢。它不起作用。我使用了“Bootstrap v4.0.0-alpha.6”。这是问题吗？ - Mostafa Norzade

是的，Bootstrap 4 alpha版本没有弹性盒子且不稳定。 - divy3993

你可以在这里查看 http://blog.getbootstrap.com/2017/08/10/bootstrap-4-beta/，Bootstrap 4 Beta具有flexbox而之前的版本没有。 - divy3993

谢谢。我下载了Bootstrap 4 beta，并将其与v4.0.0-alpha.6一起移动。但是上面的代码没有正确执行。 - Mostafa Norzade

Answer 2

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

- Saeed