Question

我刚开始使用Bootstrap，发现即使是简单的事情也很令人沮丧。

＆＃34;品牌＆＃34; Bootstrap导航栏演示中的文本以及按钮左对齐。我希望所有这些都集中在一起。下面的代码以按钮为中心，但是当我将＆＃34;品牌＆＃34;文本它与按钮重叠。

以下是代码：

<nav class="navbar navbar-inverse" role="navigation" style="margin: 0;">
          <div class="container-fluid">
            <!-- 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>
              <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" style="text-align: center;">
              <ul class="nav navbar-nav" id="navbar-media-query" style="float: none; display: inline-block;">
                <li class="active"><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                  </ul>
                </li>
              </ul>
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>

任何人都可以帮助我吗？此外，我正在努力了解为什么Bootstrap（和其他库）如此受欢迎。如果你想创建一个通用的Bootstrap网站，它很容易，但要做任何自定义的事情，你必须一起破解CSS。这似乎比它的价值更麻烦。

Answer 1

您可以尝试从<a class="navbar-brand" href="#">Brand</a>标记后移动</button>到<ul class="nav navbar-nav" id="navbar-media-query" style="float: none; display: inline-block;">之后的行。

<ul class="nav navbar-nav" id="navbar-media-query" style="float: none; display: inline-block;">
    <a class="navbar-brand" href="#">Brand</a>
    <li class="active"><a href="#">Link</a></li>

它对我有用。

但是，请注意，此更改将阻止文字＆＃39;品牌＆＃39;默认显示在小屏幕上，因为它现在在<navbar-header>类之外。它现在是collapse组的一部分。

另外，如果你想知道这个解决方案看起来很奇怪......好吧。我发现在a下使用ul标签也很奇怪。

编辑：<li class="navbar-brand"><a href="#">Brand</a></li>也可以。

Bootstrap中的中心按钮和品牌

1 个答案: