Добавление субтитров в Bootstrap Navbar - PullRequest
Новая
       43

Добавление субтитров в Bootstrap Navbar

0 голосов
/ 15 сентября 2018

У меня есть сайт Bootstrap 4 с навигационной панелью. Навбар имеет часть brand с изображением и текстом заголовка, а затем есть остальная часть панели навигации. Вы можете увидеть это здесь: https://jsfiddle.net/zmbq/aq9Laaew/218793/

Теперь я хочу добавить подзаголовок под заголовком «Цифровой ономастион». Проблема в том, что подзаголовок длинный, и я хочу, чтобы он расширялся ниже навигационных ссылок.

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

ПРИМЕЧАНИЕ: ответ на этого вопроса недостаточен, так как он дает что-то вроде этого: https://jsfiddle.net/zmbq/7et2uz0w/

Ответы [ 2 ]

0 голосов
/ 16 сентября 2018

Оберните марку и ссылки в отдельный flexbox (d-flex) div ... 

<nav class="navbar navbar-light bg-light navbar-expand-sm flex-nowrap align-items-start">
    <a class="navbar-brand" href="#">
        <img src="http://onomasticon.researchsoftwarehosting.org/assets/images/seal-impression.png">
    </a>
    <div class="d-flex flex-column">
        <div class="d-sm-flex d-block flex-nowrap">
            <a class="navbar-brand" href="#">A Digital Onomasticon</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarOnavbarNavptions" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Item one</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Item two</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Item three</a>
                    </li>
                </ul>
            </div>
        </div>
        <small>A lot more text that goes under the links and should be cleverly placed, and isn't</small>
    </div>
</nav>

https://www.codeply.com/go/9SK8ItOyzw

Похожие: Bootstrap 4 navbar с 2 рядами

0 голосов
/ 16 сентября 2018

Вы можете установить субтитры в абсолютное положение, чтобы удалить их из обычного потока контента.Непонятно, как это должно выглядеть на мобильном телефоне, я просто скрываю это в медиа-запросе.Пример: 

<a class="navbar-brand" href="#">
  <img src="http://onomasticon.researchsoftwarehosting.org/assets/images/seal-impression.png">
  A Digital Onomasticon
  <small>A lot more text that goes under the links and should be cleverly placed, and isn't</small>
</a>

.navbar-brand small {
  display: block;
  font-size: 10px;
  white-space: normal;
  position: absolute;
}

@media (max-width: 575.98px) {
  .navbar-brand small {
    display: none;
  }
}

JsFiddle

...