带有三个元素(左，中间，右)的NAVBAR:在一行中移动左右元素，在小的中心元素下方

Question

我正在用bootstrap创建一个纳维尔。它具有三个元素：左右两个图像，中间有一个搜索字段。这是我当前的代码：

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

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

Answer 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 ，而Navbar组件的对齐比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