将列表包装到Bootstrap 3中的新行

Question

In my Bootstrap navbar, I have a logo in the header and then an inline list. 在我的Bootstrap导航栏中，我在标题中有一个徽标，然后是一个内联列表。 On large screens, the logo and list are on the same line. 在大屏幕上，徽标和列表位于同一行。 On smaller screens, I want the logo centered on the first line and the list to center on a second line. 在较小的屏幕上，我希望徽标位于第一行的中心，而列表位于第二行的中心。 But, the list keeps going to vertical stacked instead of remaining inline. 但是，列表会一直保持垂直堆积而不是内联。 How can I prevent the inline list from going vertical as the screen shrinks? 当屏幕缩小时，如何防止内联列表垂直显示？

Here is a jsfiddle of my current navbar: https://jsfiddle.net/DTcHh/6936/ 这是我当前导航栏的jsfiddle： https ://jsfiddle.net/DTcHh/6936/

I need the links on the right to get closer and closer to the logo as the screen shrinks. 随着屏幕缩小，我需要右侧的链接越来越接近徽标。 Then, when there's no more room, I need those links centered on a new line below the logo, which should be centered on the first line. 然后，当没有更多空间时，我需要那些链接以徽标下方的新行为中心，该行应以第一行为中心。

Desired effect on small screens: https://drive.google.com/file/d/0B08LN9pHRwLuSkRvV3YwYVk5aWs/view?usp=sharing 在小屏幕上需要的效果： https : //drive.google.com/file/d/0B08LN9pHRwLuSkRvV3YwYVk5aWs/view?usp=sharing

html: HTML：

<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header navbar-logo">
      <a href="#"><img src="http://placehold.it/140x75" class="img-responsive navlogo" alt="logo here"></a>
    </div>
    <div class="navbar-links">
      <ul class="list-inline nav navbar-nav navbar-right navbar-list">
          <li><a href="#" style="color: black; font-weight: bold;">FAQ</a></li>
          <li><a href="#" style="color: black; font-weight: bold;">Contact</a></li>
          <li><a href="#" style="color: black; font-weight: bold">Policies</a></li>
          <li><a href="#" style="background-color: #9e1d2a; color: white">For Users</a></li>
          <li style="padding-top: 0px; padding-left: 15px"><a data-toggle="collapse" href="#nav-search-collapse"><i class="glyphicon glyphicon-search"></i></a></li>
      </ul>
    </div>
  </div>
  <div class="collapse" id="nav-search-collapse">
      <ul class="list-inline navbar-list-form">
        <li><form class="navbar-form" role="form" method="get" action="#">
          <div class="input-group">
            <input type="Search" placeholder="Search Data" class="form-control" name="q">
              <div class="input-group-btn">
                <button class="btn btn-primary">
                  <span class="glyphicon glyphicon-search"></span>
                </button>
              </div>
          </div>
        </form></li>
        <li><form class="navbar-form" role="form" method="get" action="#">
          <div class="input-group">
            <span class="input-group-addon">wwww.</span>
            <input type="Search" class="form-control" name="w_searched">
            <div class="input-group-btn">
              <button class="btn btn-primary">
                <span>Search</span>
              </button>
            </div>
          </div>
        </form></li>
      </ul>
    </div>
</div>
</body>

css: CSS：

.navbar-list {
    padding-top: 5px;
}

.navbar-list li{
    font-size: 16px;
}

#nav-search-collapse {
    width:100%;
    margin: 0 auto;
    text-align:center;
}

.navbar-list-form {
 display:inline-block;
 padding: 0;
}


@media (min-width: 0px) and (max-width: 1000px) {
    .navbar-header{
        float: left;
        width: 100%;
    } 
    .navbar-links {
        float: left;
        width: 100%;
    }
}

Answer 1

Adding this to your CSS will give you what you are looking for (you are required to define minimum width up-till which all links appear on same newline, it's your decision) 将其添加到CSS中将为您提供所需的内容（您需要定义最小宽度向上耕作，所有链接均出现在同一换行符上，这取决于您的决定）

@media (max-width: 1000px) and (min-width: 0px) {
    .navbar-links {
        text-align: center;
    }
    .nav>li {
        display: inline;
    }
    .nav>li>a {
        display: inline;
    }
}

JSFiddle 的jsfiddle

Answer 2

https://jsfiddle.net/DTcHh/6940/ https://jsfiddle.net/DTcHh/6940/

I have added this code: 我添加了以下代码：

.navbar-logo, .navbar-links {
    display: inline;
    width: initial !important;
}

If you have any questions about the modifications let me know. 如果您对修改有任何疑问，请告诉我。

将列表包装到Bootstrap 3中的新行

问题描述

2 个解决方案

解决方案1
2 已采纳 2015-04-21 17:44:39

解决方案2
1 2015-04-21 17:27:31

将列表包装到Bootstrap 3中的新行

问题描述

2 个解决方案

解决方案1 2 已采纳 2015-04-21 17:44:39

解决方案2 1 2015-04-21 17:27:31

解决方案1
2 已采纳 2015-04-21 17:44:39

解决方案2
1 2015-04-21 17:27:31