Question

我正在创建一个带引导程序的导航栏。它有三个元素：左右两个图像，中间有一个搜索区域。这是我目前的代码：

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

带有三个元素的导航栏（左，中，右）：在一行中移动左右元素，在中心元素下移动小？

1 个答案: