Текст рядом с брендом

Как мне взять марку Bootstrap и сопроводительный текст вместе с брендом?

Я пробовал это:

<nav class="navbar navbar-default">
    <div class="navbar-header">
        <div class="navbar-brand">
            <a href="..." ><img class="img-responsive" src="/brand.png")?>"></a>
            <h3>Ultimate Trade Sizer</h3>
        </div>
    </div>
</nav>

Однако я не могу заставить их выравниваться (то есть бок о бок). Он производит эффект ниже:

Обратите внимание, что я использую Bootstrap 3.

Ответы

Ответ 1

Оберните изображение в span

<nav class="navbar navbar-default">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">
            <span><img src="#"/></span>
            Ultimate Trade Sizer
        </a>
    </div>
</nav>

span по умолчанию display: inline

Ответ 2

Правильным решением было бы использовать navbar-text в h3 и не использовать никаких дополнительных элементов div или span:

<nav class="navbar navbar-default">
    <div class="navbar-header">
        <div class="navbar-brand">
            <a href="...">
                <img class="img-responsive" src="/brand.png">">
            </a>
            <h3 class="navbar-text">Ultimate Trade Sizer</h3>
        </div>
    </div>
</nav>

См. http://getbootstrap.com/components/#navbar-text для правильной документации navbar-text.

Ответ 3

Не уверен, что это правильный html, но я обернул изображение и текст в новом классе div и оставил его влево. Также изменил img на новый класс с некоторым дополнением справа, чтобы коснуться его текста. Казалось, что работа для меня, но я довольно новичок в бутстрапе, поэтому это может быть не совсем правильно. Ваш код будет выглядеть следующим образом.

HTML

<nav class="navbar navbar-default">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">
            <div class="navbar-brand-name">
                <img src="#"/>
                     Ultimate Trade Sizer
            </div>
        </a>
    </div>
</nav>

добавить новый класс css в класс .navbar-brand

.navbar-brand-name > {

  display: inline-block;
  float: left;

}

.navbar-brand-name > img {
  display: inline-block;
  float: left;
  padding: 0 15px 0 0;
}

Ответ 4

Это происходит потому, что класс img-responsive имеет display:block. В этом случае я не уверен, что вам нужен этот класс для изображения, которое вы показываете, так как оно уже довольно мало и вряд ли столкнется с проблемами, требующими реагирования.

В качестве альтернативы вы можете переопределить img-responsive в этом случае на display:inline-block, а также иметь h3 также display:inline-block.