如何使用Bootstrap 4重新排序列? [英] How to Reorder Columns with Bootstrap 4?

问题描述

我在引导程序4中使用了以下标签.

I have used the following tags in 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>

我想全幅使用徽标

如何使用reorder命令?

How do I work with the reorder command?

推荐答案

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

Bootstrap 4 uses flex/flexbox. So yes you have the option of ordering elements/columns.

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

I think what you want is using just the Bootstrap-4 classes of order-{number} with your col classes.

以下是解决方案:

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

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

You can find more here.

Codepen链接到播放屏幕宽度

希望这个答案对您有帮助！

Hope this answer helps you!

这篇关于如何使用Bootstrap 4重新排序列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！