Question

有人能告诉我为什么我的文字在以更高分辨率而非移动分辨率观看时会崩溃吗？

我想实现上述目标，下面就是我尝试过的。

<div class="navbar navbar-default navbar-fixed-top container-fluid">
      <div class="row">
            <div class="col-sm-4">
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-4">
                    <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="#">Big Google</a>
                  <a class="navbar-brand divider-vertical" href="#">Chicago - Newyork</a>
                </div>
            </div>
  </div>
</div>

下面是一个小提琴链接。任何人都可以告诉我为什么我的文本在以更高的分辨率而不是移动分辨率查看时崩溃，而且我是否以正确的方式创建文本和品牌名称？ http://www.bootply.com/abKYgnFwAj

Answer 1

这是因为bootstrap的默认设置。

bootstrap CSS中width内的.col-sm-4设置@media (min-width: 768px)。当屏幕宽度至少为768px（或更高）时，这会将整个width的{{1}}设置为33.33333333％（总屏幕宽度的1/3）。

由于这对于普通屏幕，此部分的宽度变为（1024/3）px，这不足以使徽标的宽度和另一部分的宽度在同一行中。

当宽度足以使整个内容适合同一行时，它可以正常工作。例如，我的屏幕宽度是1600px，因此这个div的宽度变为533px，足以容纳同一行。

在768px的屏幕宽度以下，它不会指定任何特定宽度（意味着它需要整个可用宽度），因此您不会看到任何环绕。如果你添加几个链接，你会看到相同的行为，因为有4个链接，总宽度超过可用的屏幕宽度，因此内容环绕到下一行。

如果您不希望它被分配任何特定宽度，那么您可以通过添加以下内容来覆盖它：

div

或者，如果要为超过1024px的分辨率指定特定宽度，可以使用以下媒体查询。

.col-sm-4{
    width: auto;
}

Sample Demo

Answer 2

当我将您的示例中的CSS更改为此时，看起来您希望它看起来。

.divider-vertical {
    height: 50px;
    border-left: 1px solid #a8a8a8;
    border-right: 1px solid #a8a8a8;
}

我的猜测是，导航栏中的不同边距导致第二个孩子被推到下一行，但我可能错了。无论如何它都有用。我希望这有帮助，祝你好运！

同一行中的徽标和文本 - bootstrap navbar

2 个答案: