Оберните список новой строкой в Bootstrap 3

В моем навигаторе Navigator у меня есть логотип в заголовке, а затем встроенный список. На больших экранах логотип и список находятся на одной строке. На небольших экранах я хочу, чтобы логотип был сосредоточен на первой строке, а список - на второй строке. Но список продолжает идти вертикально, а не оставаться в очереди. Как я могу предотвратить перемещение встроенного списка по вертикали, когда экран сжимается?Оберните список новой строкой в Bootstrap 3

Вот jsfiddle моей текущей навигационной панели: https://jsfiddle.net/DTcHh/6936/

мне нужны ссылки на право стать ближе и ближе к логотипу, как экран сжимается. Тогда, когда нет больше места, мне нужны эти ссылки, сосредоточенные на новой строке под логотипом, которые должны быть сосредоточены на первой строке.

Желаемый эффект на маленьких экранах: https://drive.google.com/file/d/0B08LN9pHRwLuSkRvV3YwYVk5aWs/view?usp=sharing

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:

.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%; 
    } 
}

источник

2015-04-21 plact

Добавление этого на ваш CSS даст вам то, что вы ищете (вы должны определить минимальную ширину вверх, до которой все ссылки появляются на той же строки, это ваше решение)

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

JSFiddle

источник

2015-04-21 17:44:39

Спасибо, @ashh! И это, и ответная работа @ odedta - это, тем не менее, для меня теперь легче стилизовать/выровнять ссылки, чтобы они были центрированы. Я буду «принимать» его. Спасибо большое вам обоим!! – plact

еще одна вещь @ashhh или @odedta: я не могу заставить логотип центрировать себя на верхней строке ...? Я попытался использовать 'margin: auto;' и 'text-align: center;', но не повезло – plact

'.navbar-header { text-align: -webkit-center; } 'или гораздо лучший способ сделать это можно найти здесь [http://stackoverflow.com/a/20029582/2534513) –

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

Я добавил этот код:

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

Если у вас есть какие-либо вопросы по поводу изменений, дайте мне знать.

источник

2015-04-21 17:27:31 odedta

Кстати, этот мультимедийный запрос '@media (min-width: 0px) и (max-width: 1000px)' можно скрыть до '@media (max-width: 1000px)' – odedta

Спасибо, что получаем ближе, но я пытаюсь заставить ссылки оставаться на одной линии, а не укладывать один поверх другого. Я приложу скриншот желаемого эффекта ... – plact

Затем используйте display: inline для элементов списка. – odedta

Оберните список новой строкой в ​​Bootstrap 3

ответ

Смежные вопросы

Оберните список новой строкой в Bootstrap 3