Question

我正在实施Bootstrap导航栏徽标，以便它位于中心位置。最近，我找到了要解决的css代码。然而，关键是它对于大型设备来说是完美的，但是当我使用带有小型设备的inspect元件时，它并没有像我想象的那样响应。这是代码：

 <button ng-click="showValues()">Submit</button>

.sFont{
  font-family: Gotham-Med; 
  color: #ffffff; font-size: 25pt; 
  text-align: center;
}
.centeR {
  position: absolute;
  left: 50%;
  margin-left: -50px !important;
  display: block;
}

This is perfect as I wanted.

The text's overlapping with icon bar which I can't even click on.

你能建议我吗？我试图这样做，但它仍然不起作用。

Answer 1

这可能会有所帮助。您可以绝对定位图像，然后相对于图像定位文本，并在navbar上以负边距对其进行偏移，以便所有内容都居中。

请参阅示例代码段。

.navbar.navbar-inverse {
  background-color: black;
  border: none;
  border-radius: 0px;
}
.navbar.navbar-inverse .navbar-brand img {
  margin-top: -15px;
  height: 50px;
}
.navbar.navbar-inverse .navbar-brand.navbar-brand-centered {
  position: absolute;
  left: 50%;
  width: 100px;
}
.navbar.navbar-inverse .logo {
  margin-top: -35px;
  position: relative;
  left: 60px;
  font-family: Gotham-Med;
  color: #ffffff;
  font-size: 25pt;
}
.navbar.navbar-inverse > .container .navbar-brand.navbar-brand-centered,
.navbar.navbar-inverse > .container-fluid .navbar-brand.navbar-brand-centered {
  margin-left: -110px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <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="navbar-brand navbar-brand-centered">
        <img src="http://placehold.it/50x50" />
        <p class="logo">Penston</p>
      </div>
    </div>
    <div class="collapse navbar-collapse" id="bs-nav">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a>

        </li>
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>

          <ul class="dropdown-menu">
            <li><a href="#">Action</a>

            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Bootstrap Navbar中心品牌具有响应性

1 个答案: