Question

我有一排3列。

logo - search - fb login

        <div class="row col my-auto">
            <div id="logo" class="col-auto">
                <a href="./index.html">
                    <img src="images/logo.png" alt="ppissis logo"/>
                </a>
            </div>
            <div id="search" class="col-7">
                (...input)
            </div>
            <div id="fb" class="col-1 ml-auto">
                <img src="images/fb_login.png" alt="FB login" height="40"/>
            </div>
        </div>

在移动设备上，我希望将其更改为2行。第一个包含logo和fb登录，第二行包含搜索。

logo(upper-left) fb-login(upper-right)
search(whole line)

使用bootstrap我能够通过推拉来实现这一目标但现在使用B4我不知道如何实现它。

有关如何使用bootstrap 4实现此目的的任何想法？

Answer 1

使用Bootstrap 4 Ordering classes ..

<div class="container">
    <div class="row">
        <div id="logo" class="col-auto">
            <a href="#l">
                <img src="//placehold.it/100x40" alt="ppissis logo">
            </a>
        </div>
        <div id="search" class="col-sm-7 order-last order-sm-0">
            <input type="text" class="form-control" placeholder="">
        </div>
        <div id="fb" class="col-auto col-sm-1 ml-auto">
            <img src="//placehold.it/40x40?text=FB" alt="FB login" height="40">
        </div>
    </div>
</div>

https://www.codeply.com/go/rsBgpRVPFV

order-last order-sm-0使xs上的第二列和sm上的自然顺序结束。

带有bootstrap 4的响应式布局（推拉）

1 个答案: