html - 如何控制导航栏间距？

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 类包装了导航栏

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

作为页面的其余部分，将您的内容包装在 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>