Question

我需要菜单填充其容器的宽度而不是左对齐。

[LOGO A|B|C            ]
[LOGO   A  |  B  |  C  ]

这是我的测试代码。我的问题是如何使用bootstrap实现它。

.navbar-brand{width: 405px;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav table-responsive">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

Answer 1

您可以使用flex-box

＆＃13;

.navbar-brand {
  width: 405px;
}

@media screen and (min-width:768px) {
  .navbar>.container-fluid {
    display: flex;
  }
  ul.nav.navbar-nav {
    flex: 1 1;
    display: flex;
  }
  .navbar-nav>li {
    flex: 1 1;
  }
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav table-responsive">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

＆＃13;

Answer 2

你需要这样的东西吗？

＆＃13;

.navbar-nav {
  display: flex;
    width: 100%;
    justify-content: space-between;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    
     
    <ul class="nav navbar-nav table-responsive">
    <li class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a>
    </li>
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

＆＃13;

Answer 3

您需要将.navbar-nav设置为float: right;，如下所示：

.navbar-nav {
  float: right !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav table-responsive">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>

Answer 4

你想要这样的东西吗？

.navbar-header {width: 160px;}
.navbar-nav.table-responsive {
   width: calc(100% - 160px);
   border: 0;
   margin-left: 0;
   margin-right: 0;
   display: flex;
   flex-wrap: wrap;
}
.navbar-nav > li {
   float: left;
   flex-grow: 1;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header pull-left">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav pull-left table-responsive">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

Boostrap菜单填充宽度

4 个答案: