Question

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

    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-3 col">
                <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">
                <a href="#">
                    <img src="images/logo.png">
                </a>
            </div>

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

我想要带有徽标的全宽

如何使用重新排序命令？

Answer 1

Bootstrap 4使用flex / flexbox。所以是的，您可以选择订购元素/列。

我认为你想要的只是使用order-{number}类的col类的Bootstrap-4类。

以下是解决方案：

＆＃13;

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

＆＃13;

您可以找到更多 here 。

Codepen link to playaround screen widths

希望这个答案可以帮到你！

Answer 2

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

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

2 个答案: