主页 / 问题 / 617913
Accepted
Roman Grinyov
Asked:2020-01-22 18:56:08 +0000 UTC2020-01-22 18:56:08 +0000 UTC

如何在 Bootstrap 中操作 .navbar-brand 宽度？

  • 772

有这样一个navbar、sidebar和content：

.navbar-brand,
.sidebar-box {
  border-right: 1px solid red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Lorem Ipsum</a>
    </div>
    <div id="collapse" class="collapse navbar-collapse">
      <ul class="navbar-nav nav">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>
  </div>
</nav>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-2 hidden-xs hidden-sm sidebar-box">Sidebar Box</div>
    <div class="col-md-10">Content Box</div>
  </div>
</div>

http://codepen.io/anon/pen/dNWZJX

如何操作width-.navbar-brand使其符合要求.col-md-2？

我需要导航栏项目从与内容相同的级别开始，即右边框.navbar-brand并.sidebar-box匹配（使用mdand lg，因为在xsand的情况下md侧边栏被隐藏）。

Bootstrap - 宽度 .navbar-brand

我的意思是使用 Bootstrap。

html

1 个回答

  1. Best Answer

    通过将以下内容添加到我的样式表来解决问题：

    .navbar-header {
  min-width: 16%;
}


    .navbar-brand,
.sidebar-box {
  border-right: 1px solid red;
}

.navbar-header {
  min-width: 16%;
}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Lorem Ipsum</a>
    </div>
    <div id="collapse" class="collapse navbar-collapse">
      <ul class="navbar-nav nav">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>
  </div>
</nav>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-2 hidden-xs hidden-sm sidebar-box">Sidebar Box</div>
    <div class="col-md-10">Content Box</div>
  </div>
</div>

    http://codepen.io/anon/pen/GrmGmK

    • 0

相关问题