Question

我希望能够将一些文本或图像集中在导航栏中，这就是我正在做的事情。

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

<div class="navbar navbar-default">
  <div class="container-fluid">
    <div class="text-center navbar-text">
	  <p><img src='http://placekitten.com/g/50/50'></p>
	</div>
  </div>
</div>

然而，只有在宽度小于768px时才会居中。我认为这与响应性有关。如何修复它以使其以所有宽度为中心？

Answer 1

删除.navbar-text在该宽度之上应用的浮点数：

.navbar-text {
    float:none;
}

或者只是从div中删除navbar-text类：

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<div class="navbar navbar-default">
  <div class="container-fluid">
    <div class="text-center">
      <p>
        <img src='http://placekitten.com/g/50/50'>
      </p>
    </div>
  </div>
</div>

＆＃13;

Answer 2

答案很简单。如果我们查看Bootstrap source code，我们可以看到最小宽度为768px，它会浮动到左侧。

@media (min-width: 768px) {
  .navbar-text {
    float: left;
    margin-right: 15px;
    margin-left: 15px;
  }

答案是移除浮动。

@media (min-width: 768px)
{
    .navbar-text
    {
        float: none;
    }
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<div class="navbar navbar-default">
    <div class="container-fluid">
        <div class="text-center navbar-text">
            <p><img src='http://placekitten.com/g/50/50'></p>
        </div>
    </div>
</div>

在导航栏中居中文本或图像

2 个答案: