Панель навигации Bootstrap

Question

Я знаю, как создать раскрывающееся меню бутстрапа, распространяющегося по экрану, но я не знаю, как сделать ссылки такими, как заголовки.

Когда я добавить свои ссылки в раскрывающемся меню, они просто появляются один под другим, как можно достичь выше результата? Thankyou

Answer 1

Никто не собирается стиль его совсем так хорошо для вас, но рассмотреть вопрос об изменении этого примера, из Bootstrap documentation о однокнопочных выпадающих, которые достигают функциональность вы хотите:

<div class="dropdown open"> 
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
    Dropdown button 
    </button> 
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> 
    <a class="dropdown-item" href="#">Action</a> 
    <a class="dropdown-item" href="#">Another action</a> 
    <a class="dropdown-item" href="#">Something else here</a> 
    </div> 
</div> 

Answer 2

Что вам нужно заключается в том, чтобы задать правильный вопрос. Это уже размещено здесь: twitter bootstrap - multi column dropdown. Вам потребуется раскрывающийся список с несколькими колонками.

Answer 3

Если вы будете использовать загрузчик, то вы можете просто сделать это:

<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">WebSiteName</a> 
    </div> 
    <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">Page 1-1</a></li> 
      <li><a href="#">Page 1-2</a></li> 
      <li><a href="#">Page 1-3</a></li> 
     </ul> 
     </li> 
     <li><a href="#">Page 2</a></li> 
<ul class="dropdown-menu"> 
      <li><a href="#">Page 2-1</a></li> 
      <li><a href="#">Page 2-2</a></li> 
      <li><a href="#">Page 1-3</a></li> 
     </ul> 
     </li> 
     <li><a href="#">Page 3</a></li> 
    </ul> 
    </div> 
</nav>