Question

我希望我的导航栏元素不占用整个页面的宽度。我已经进行了研究，试图找到最佳的方法来实现此目的，但是我得到了大量不同的解决方案。我希望导航栏的两边都有空间，但页面要保持完整宽度，同时左边有品牌，右边有链接。处理导航栏的宽度及其元素间距的最佳方法是什么？

HTML

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="col-lg-12 navigation">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapsed" 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>
      <a class="navbar-brand" href="#"> 
        <span><img src="images/brand.png" width="50" height="50" alt=""></span>Logo
      </a>   
      <div class="collapse navbar-collapse" id="navbar-collapsed">
        <ul class="nav navbar-nav">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

CSS

.navbar {
  background-color: cyan;
  text-align: center;
  width:100%;
}

我所拥有和想要的图像：

建议更改后：

Answer 1

这是您想要的吗？，以全屏模式打开代码段。

我用container类包装了导航栏

还向pull-right添加了navbar-collapsed类，以将链接推向右侧。

与页面的其余部分一样，将内容包装在container-fluid

中

基本上container类具有固定的宽度，具体取决于浏览器的宽度和 container-fluid占用了浏览器的整个宽度

body {}

.navbar {
  background-color: cyan;
  text-align: center;
  width: 100%;
}

.navbar-brand {
  padding:4px!important;
  float:none !important;
}

.navbar-brand img {

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <nav class="navbar navbar-default">

    <div class="col-lg-12 navigation text-left">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapsed" 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>
      <a class="navbar-brand" href="#">
        <span><img src="https://placehold.it/100x100" width="40" height="100" alt=""></span>Logo
      </a>

      <div class="collapse navbar-collapse pull-right" id="navbar-collapsed">
        <ul class="nav navbar-nav">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
        </ul>
      </div>
    </div>
  </nav>
</div>

<div class="container-fluid">
  Rest of page content
</div>

如何控制导航栏间距？

1 个答案: