摆脱Bootstrap中的第二行小视图和更多

StackOverflow https://stackoverflow.com//questions/25009109

题

我正在尝试将一个导航链接到顶部作为下拉按钮的标签，但它一直在第二行放置。我终于修复了它，以便我可以向右或向左移动，并且在CSS格式化之后它看起来正确，我试图改变它在该格式中处理新行的方式，没有成功。我对HTML和CSS很新，过去3天一直在学习它。

<style>
.jumbotron{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height:300px;
    color:white !important;
}
#bitcoin{
    height: 68px;
    width: 68px;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
     color: #777;
}
#cherry{
    width: 50px;
}
.navbar-left {float: left !important;}

.navbar-right {float: right !important;}
@media(max-width:767px)
{
.navbar-right {margin-right:20px;}
.navbar-header:after 
{
clear: none;
}
.navbar-nav.navbar-right > li { float: left; }

.navbar-collapse:before {clear:both;}

.navbar-collapse {overflow-y: hidden;}
.navbar-collapse.in {overflow-y: visible;}

.navbar-collapse.in > ul {border-top: 1px double #101010;}
}
.navbar-brand {
font-size: 25px;
line-height: 10px;
padding-bottom: 5px;
}
.logo_tagline {
text-transform: uppercase;
font-size: 10px;
letter-spacing: 2px;
color:#bbb;
}
}
. 

<body>
    <!-- Navbar -->
    <nav class="navbar navbar-default navbar-inverse" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-nav-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div class="navbar-inner">
                    <a class="brand" href="index.html"> <img id="cherry" src="img/cheery3.svg"></a>
                </div>
            </div>

            <div class="navbar-left">
                <ul class="nav navbar-nav visible-xs">
                    <li><a href="#">Nav</a></li>
                    </ul>
                </div>
            <div class="collapse navbar-collapse" id="example-nav-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="index.html">Home</a></li>
                    <li><a href="#">Bitcoin</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </div>
        </div>
    </nav>
</body>
.

有帮助吗？

解决方案

保留已添加的样式，您需要将包含ul的div与Navbar-Inner div内的NAV文本放在UL中，并且需要使用Visible-XS-Inline类。此外，由于您已将UL与左侧的导航文本浮动，因此您也必须将#Cherry div浮动到左侧，或者它将出现在导航文本的右侧。

css：

#cherry {
  width: 50px;
  float: left; /*add this*/
}
.

html： 

<!-- Navbar -->
<nav class="navbar navbar-default navbar-inverse" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-nav-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <div class="navbar-inner">
        <a class="brand" href="index.html"> <img id="cherry" src="img/cheery3.svg"></a>
        <div class="navbar-left visible-xs-inline">
          <ul class="nav navbar-nav">
            <li><a href="#">Nav</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="collapse navbar-collapse" id="example-nav-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="#">Bitcoin</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </div>
  </div>
</nav>
.

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top