Вставить панель навигации Bootstrap 3 в заголовок

В начальной загрузке я хочу создать заголовок страницы, который состоит из статического заголовка, панели навигации во второй строке и изображения профиля справа, например:

Изображение профиля должно быть фиксированного размера, заголовок и панель навигации должны иметь одинаковый размер и занимать всю ширину экрана.

Проблема в том, что я понятия не имел, как добиться этого в css, особенно потому, что ему нужно встроить навигационную панель начальной загрузки. Моя единственная идея - это старомодная таблица 2x2, где изображение занимает две строки, но таблицы не предназначены для проблем с макетом, поэтому уверен, что в css должен быть какой-то лучший способ?

какую версию бутстрапа вы используете?

— 01.06.2018 09:22

Я использую Bootstrap 3

— 01.06.2018 13:47

html css twitter-bootstrap header navbar

01.06.2018 08:52

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

619

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Используйте медиа-стиль bootstrat 3

В этом фрагменте я использовал только 1 встроенный BS Nav и добавил цвет границы для выделения медиа-объектов.

ТАКЖЕ - навигационные панели Bootstrap отзывчивы, поэтому, когда вы запускаете фрагмент, переключайтесь на расширенный вид

.media {
  border: 1px solid gray;
}

.media, .media-body {
  overflow: visible !important;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class = "row">
  <div class = "col-sm-offset-2 col-sm-8">
    <div class = "media">
      <div class = "media-body">
        <h4 class = "media-heading">Media heading</h4>
        <div>
          <nav class = "navbar navbar-default">
            <div class = "container-fluid">
              <!-- Brand and toggle get grouped for better mobile display -->
              <div class = "navbar-header">
                <button type = "button" class = "navbar-toggle collapsed" data-toggle = "collapse" data-target = "#bs-example-navbar-collapse-1" aria-expanded = "false">
        <span class = "sr-only">Toggle navigation</span>
        <span class = "icon-bar"></span>
        <span class = "icon-bar"></span>
        <span class = "icon-bar"></span>
      </button>
                <a class = "navbar-brand" href = "#">Brand</a>
              </div>

              <!-- Collect the nav links, forms, and other content for toggling -->
              <div class = "collapse navbar-collapse" id = "bs-example-navbar-collapse-1">
                <ul class = "nav navbar-nav">
                  <li class = "active"><a href = "#">Link <span class = "sr-only">(current)</span></a></li>
                  <li><a href = "#">Link</a></li>
                  <li class = "dropdown">
                    <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" role = "button" aria-haspopup = "true" aria-expanded = "false">Dropdown <span class = "caret"></span></a>
                    <ul class = "dropdown-menu">
                      <li><a href = "#">Action</a></li>
                      <li><a href = "#">Another action</a></li>
                      <li><a href = "#">Something else here</a></li>
                      <li role = "separator" class = "divider"></li>
                      <li><a href = "#">Separated link</a></li>
                      <li role = "separator" class = "divider"></li>
                      <li><a href = "#">One more separated link</a></li>
                    </ul>
                  </li>
                </ul>
              </div>
              <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
          </nav>
        </div>
      </div>
      <div class = "media-right">
        <a href = "#">
          <img class = "media-object" src = "http://via.placeholder.com/80x80" alt = "Portrait">
        </a>
      </div>
    </div>
    <div class = "media">
      <div class = "media-body">
        <h4 class = "media-heading">Media heading</h4>
        <nav>Nav</nav>
      </div>
      <div class = "media-right">
        <a href = "#">
          <img class = "media-object" src = "http://via.placeholder.com/80x80" alt = "Portrait">
        </a>
      </div>
    </div>
    <div class = "media">
      <div class = "media-body">
        <h4 class = "media-heading">Media heading</h4>
        <nav>Nav</nav>
      </div>
      <div class = "media-right">
        <a href = "#">
          <img class = "media-object" src = "http://via.placeholder.com/80x80" alt = "Portrait">
        </a>
      </div>
    </div>
  </div>
</div>

Отличный подход! Но внутри заголовка СМИ выпадающий список обрезан.

— 03.06.2018 10:41

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

— 04.06.2018 18:25

отключение overflow:hidden на корпусе носителя помогло.

— 04.06.2018 18:29

01.06.2018 21:48

Ответ принят как подходящий

Чтобы показать полный эффект Просмотрите полноэкранный режим.

<link href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel = "stylesheet" />
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


    <div class = "">
        <div class = "row">
            <div class = "col-md-11">
                <nav class = "navbar navbar-default navbar-fixed-top" style = "border-radius: 5px 5px 0px 0px; border-bottom: none; border-right: 1px solid #e7e7e7; width: 91.5%">
                    <div class = "container-fluid">
                        <!-- Brand and toggle get grouped for better mobile display -->
                        <div class = "navbar-header">
                            
                            <a class = "navbar-brand" href = "#">Brand</a>
                        </div>

                        <!-- Collect the nav links, forms, and other content for toggling -->
                       
                    </div>
                    <!-- /.container-fluid -->
                </nav>

                <nav class = "navbar navbar-default" style = "margin-top: 50px; border-radius: 0px 0px 5px 5px; border-top: none">
                    <div class = "container-fluid">
                       <div class = "navbar-header">
                        <button type = "button" class = "navbar-toggle collapsed" data-toggle = "collapse" data-target = "#bs-example-navbar-collapse-1"
                            aria-expanded = "false">
                            <span class = "sr-only">Toggle navigation</span>
                            <span class = "icon-bar"></span>
                            <span class = "icon-bar"></span>
                            <span class = "icon-bar"></span>
                        </button>
                       </div>

                        <!-- Collect the nav links, forms, and other content for toggling -->
                        <div class = "collapse navbar-collapse" id = "bs-example-navbar-collapse-1">
                            <ul class = "nav navbar-nav">
                                <li >
                                    <a href = "#">Link
                                        <span class = "sr-only">(current)</span>
                                    </a>
                                </li>
                                <li>
                                    <a href = "#">Link</a>
                                </li>
                                <li class = "dropdown">
                                    <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" role = "button" aria-haspopup = "true" aria-expanded = "false">Dropdown
                                        <span class = "caret"></span>
                                    </a>
                                    <ul class = "dropdown-menu">
                                        <li>
                                            <a href = "#">Action</a>
                                        </li>
                                        <li>
                                            <a href = "#">Another action</a>
                                        </li>
                                        <li>
                                            <a href = "#">Something else here</a>
                                        </li>
                                        <li role = "separator" class = "divider"></li>
                                        <li>
                                            <a href = "#">Separated link</a>
                                        </li>
                                        <li role = "separator" class = "divider"></li>
                                        <li>
                                            <a href = "#">One more separated link</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        <form class = "navbar-form navbar-left">
                            <div class = "form-group">
                                <input type = "text" class = "form-control" placeholder = "Search">
                            </div>
                            <button type = "submit" class = "btn btn-default">Submit</button>
                        </form>
                            <ul class = "nav navbar-nav navbar-right">
                                <li>
                                    <a href = "#">Link</a>
                                </li>
                                <li class = "dropdown">
                                    <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" role = "button" aria-haspopup = "true" aria-expanded = "false">Dropdown
                                        <span class = "caret"></span>
                                    </a>
                                    <ul class = "dropdown-menu">
                                        <li>
                                            <a href = "#">Action</a>
                                        </li>
                                        <li>
                                            <a href = "#">Another action</a>
                                        </li>
                                        <li>
                                            <a href = "#">Something else here</a>
                                        </li>
                                        <li role = "separator" class = "divider"></li>
                                        <li>
                                            <a href = "#">Separated link</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                        <!-- /.navbar-collapse -->
                    </div>
                    <!-- /.container-fluid -->
                </nav>
            </div>    <div class = "col-md-1">
      <div style = "background-color: #f0f0f0; margin-left: -30px; padding-left: 10px; position: fixed">
        <img src = "https://cdn4.iconfinder.com/data/icons/dragon/512/User.png" alt = "" class = "" style = "width:100px;  margin-left: 10px ">
      </div>
    </div>
  </div>
  <!--/.row-->
  <div style = "height: 100vh;"></div>
</div>
<!--/.container-fluid-->

Хороший! Но почему-то я вижу две панели навигации (одну в заголовке и одну ниже) - наверное, мне просто нужно удалить одну из кода?

— 03.06.2018 10:40

01.06.2018 22:13