Question

我找到了

的代码

但是在这段代码中，我希望“主页图标”永远不会在任何浏览器尺寸下折叠。

代码：

         <div class="navbar navbar-blue navbar-static-top">
            <div class="navbar-header">
              <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a href="http://usebootstrap.com/theme/facebook" class="navbar-brand logo">b</a>
            </div>
            <nav class="collapse navbar-collapse" role="navigation">
            <ul class="nav navbar-nav">
              <li>
               ###▽▽▽ I want this icon remain on the navbar, not in collapsed dropdown menu
                <a href="#"><i class="glyphicon glyphicon-home"></i></a>
               ###△△△ I want this icon remain on the navbar, not in collapsed dropdown menu
              </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i></a>
                <ul class="dropdown-menu">
                  <li><a href="">More</a></li>
                  <li><a href="">More</a></li>
                  <li><a href="">More</a></li>
                </ul>
              </li>
            </ul>
            </nav>
        </div>

Bootply： https://www.bootply.com/lEfd188zDg

我尝试将<a href="#"><i class="glyphicon glyphicon-home"></i></a>移到<a href="http://usebootstrap.com/theme/facebook" class="navbar-brand logo">b</a>之后，但看起来非常难看。

我希望“主页图标”仍然可以在较小的浏览器尺寸中看到，看起来很不丑。我怎么能很好地修改？

修改

图：

这个简化的代码与我首先发布的代码略有不同。

简化代码：

<div class="wrapper">
<div class="box">
<div class="row row-offcanvas row-offcanvas-left">
<div class="column col-sm-12 col-xs-12" id="main">
<!-- top nav -->
<div class="navbar navbar-blue navbar-static-top">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <nav class="collapse navbar-collapse" role="navigation">
    <ul class="nav navbar-nav">
      <li>
        <a href="#"><i class="glyphicon glyphicon-home"></i></a>
      </li>
        <li>
        <a href="#"><i class="glyphicon glyphicon-home"></i></a>
        </li>
        <li>
        <a href="#"><i class="glyphicon glyphicon-home"></i></a>
        </li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i></a>
        <ul class="dropdown-menu">
          <li><a href="">More</a></li>
          <li><a href="">More</a></li>
        </ul>
      </li>
    </ul>
    </nav>
<!-- /top nav -->
</div>
</div>
</div>
</div>
</div>

原始结果如下：

在狭窄的浏览器中，

但目的结果如下：

会给我这样做的方法吗？

Answer 1

我刚刚更新了您的HTML代码并添加了CSS。只需用你的替换它。请只点击导航。

<style>

.heading-icons li{ 
padding: 9px 10px; 
margin-top: 8px; 
margin-right: 15px; 
}

</style>
<div class="navbar navbar-blue navbar-static-top">
                <div class="col-xs-6 col-sm-6">
                    <ul class="list-inline heading-icons">
                        <li>
                            <a href="#"><i class="glyphicon glyphicon-home"></i></a>
                        </li>
                        <li>
                            <a href="#"><i class="glyphicon glyphicon-home"></i></a>
                        </li>
                        <li>
                            <a href="#"><i class="glyphicon glyphicon-home"></i></a>
                        </li>
                    </ul>
                </div>

                <div class="navbar-header col-xs-6 col-sm-6">
                    <button class="navbar-toggle" type="button" data-toggle="collapse"
                            data-target=".navbar-collapse">
                        <span class="sr-only">Toggle</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <nav class="collapse navbar-collapse" role="navigation">

                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i
                                    class="glyphicon glyphicon-user"></i></a>
                            <ul class="dropdown-menu">
                                <li><a href="">More</a></li>
                                <li><a href="">More</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>
                <!-- /top nav -->
            </div>

我该如何修改这个引导程序代码？

1 个答案: