时间戳

首页 > 解决方案 > 如何控制导航栏间距？

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

问题描述

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

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%;
}

我拥有和想要的形象：

在此处输入图像描述

建议更改后：

在此处输入图像描述

标签： htmlcsstwitter-bootstraptwitter-bootstrap-3navigation

解决方案

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

我已经用一个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>

推荐阅读