具有三个元素（左、中、右）的导航栏：将左和右元素移动到一行中，并在中心元素下方小？答案

【问题标题】：Navbar with three elements (left, center, right): Move left and right element in one row and under center element on small?具有三个元素（左、中、右）的导航栏：将左和右元素移动到一行中，并在中心元素下方小？
【发布时间】：2017-04-05 01:51:10
【问题描述】：

我正在使用引导程序创建导航栏。它具有三个元素：左右两个图像以及中心的搜索字段。这是我当前的代码：

HTML：

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <form class="navbar-form navbar" role="search">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Suche" name="suche">
                <div class="input-group-btn">
                    <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                </div>
            </div>
        </form>
        <div class="nav navbar-nav navbar-left">
            <a href="#"><img src="../images/ITPlattformLogo.png" alt="" height="80"></a>
        </div>
        <div class="nav navbar-nav navbar-right">
            <a href="http://www.hwr-berlin.de/home/" class="navbar-left"><img src="../images/HWRLogo.jpg" alt="" height="80"></a>
        </div>
    </div>
</nav>

CSS：

.navbar-form
{
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    padding-top: 14px;
}

对于较小的屏幕尺寸，我希望将两个图像放在一行中，并将搜索字段放在下面的第二行中，以全屏宽度显示。我该怎么做？

【问题讨论】：

标签： html css twitter-bootstrap navbar

【解决方案1】：

一种方法是使用媒体查询调整元素位置..

// when navbar is horizontal
@media (min-width: 768px) {
    .navbar-form
    {
        position: absolute;
        width: 100%;
        left: 0;
        text-align: center;
        padding-top: 14px;
    }
}

// when navbar is vertical
@media (max-width: 768px) {
    .nav.navbar-nav {
        float:left;
        width: 50%;
        text-align:center;
    }
    .nav.navbar-nav a {
        margin: 0 auto;
    }
}

http://www.codeply.com/go/t83k8AkHkL

另一种方法是使用 Bootstrap 4，它使用 flexbox 和 alignment of Navbar components easier than 3.x。

<nav class="navbar navbar-toggleable navbar-light bg-faded">
    <ul class="navbar-nav mx-auto flex-shrink">
        <li class="nav-item active">
            <a class="nav-link" href="#"><img src="//placehold.it/130x80" alt="one" height="80"></a>
        </li>
    </ul>
    <ul class="navbar-nav mx-auto flex-unordered flex-sm-last">
        <li class="nav-item ">
            <a class="nav-link" href="#"><img src="//placehold.it/130x80" alt="two" height="80"></a>
        </li>
    </ul>
    <form class="mx-2 my-auto d-flex w-100 flex-last flex-sm-unordered">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search">
            <span class="input-group-btn">
                <button class="btn btn-outline-secondary" type="button">GO</button>
              </span>
        </div>
    </form>
</nav>

http://www.bootply.com/E6gfMKzhl4

【讨论】：