Question

我了解bootstrap并将响应式页面设为apple main page （抱歉，我不能发布更多两个链接） 在标题中所有元素都隐藏在按钮下，除了苹果和包。

在小尺寸的页面中，按钮被留下，苹果是中心，包是对的。按钮下面都是元素，除了苹果和包。我怎么能得到这个结果呢？我的代码：

<header class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#responsive-menu">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>   
            </div>
            <div class="collapse navbar-collapse" id="responsive-menu">
                <ul class="nav navbar-nav" >
                    <li><a href="#"><img src="http://www.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/apple/image_large.svg"></a></li>
                    <li><a href="#"><img src="http://www.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/links/mac/image_large.svg"></a></li>
                    <li><a href="#"><img src="http://www.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/links/ipad/image_large.svg"></a></li>
                    <li><a href="#"><img src="http://www.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/links/iphone/image_large.svg"></a></li>
                    <li><a href="#"><img src="http://www.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/links/watch/image_large.svg"></a></li>
                    <li><a href="#"><img src="http://www.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/links/tv/image_large.svg"></a></li>
                    <li><a href="#"><img src="http://www.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/links/music/image_large.svg"></a></li>
                    <li><a href="#"><img src="http://www.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/links/support/image_large.svg"></a></li>
                    <li><a href="#"><img src="http://www.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/search/image_large.svg"></a></li>
                    <li><a href="#"><img src="http://www.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/bag/image_large.svg"></a></li>
                </ul>
            </div>
        </div>
    </header>

并默认bootstrap.css

Answer 1

首先，按如下方式更改navbar-header元素：

<!-- Add a text-center class to handle centering your Apple logo -->
<div class="navbar-header text-center">
    <!-- Add your Apple logo (only seen on extra-small viewports) -->
    <a class="navbar-brand visible-xs" href="#"><img src="http://www.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/apple/image_large.svg"></a>
    <!-- Add your last "shopping" icon to the right (via pull-right) -->
    <a class='pull-right visible-xs' href="#"><img src="http://www.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/bag/image_large.svg"></a>
    <!-- Add the pull-left style to your button to left-align it -->
    <button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#responsive-menu">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
    </button>   
</div>

然后添加以下样式以根据需要调整自定义CSS：

/* Absolutely center your logo over the header */
.navbar-brand { float: none; position: absolute; top: 0px; width: 100vw;  padding: 0}
/* Set the default display option to cause it to be centered */
.navbar-brand img { display: initial; }
/* Add a left margin to your now left-aligned toggle button */
.navbar-toggle.pull-left { margin-left: 10px;}
/* Do the same for your right-aligned shopping link */
a.pull-right { margin-right: 10px;}

示例

你可以see an example of this here并在下面演示：

如何在按钮下隐藏导航栏中的所有ul？

1 个答案: