Question

我正在尝试将文字侧显示为徽标，下面的代码我可以在徽标后面的下一行显示。我已经尝试过搜索这个问题，但我仍然没有得到我的问题。我正在使用bootstrap 3.3.7v。

<nav class="navbar navbar-inverse" role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-
            toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
           <span><img src="images/logo.png" height="100" alt="logo" /></span>
           <h2>MyWebiste</h2>
        </div>
    </div>
</nav>

Answer 1

只需将其添加到您的本地css文件

即可

.nav-logo h2 {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
}

Answer 2

我在徽标和文本周围创建了一个容器，而不是将其定义为具有垂直对齐的Flexbox。

＆＃13;

.nav-logo {
display: flex;
align-items: center;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse" role="navigation">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data- toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
      <div class="nav-logo">
        <span> <img src="http://placehold.it/200x100" height="100" alt="logo" />
 </span>
        <h2>MyWebiste</h2>
      </div>

    </div>
  </div>
</nav>

＆＃13;

如何在bootstrap中左右显示徽标和文本

2 个答案: