需要Bootstrap导航栏项目以水平填充整行

时间：2017-11-23 09:30:05

标签： html css twitter-bootstrap

我需要我的导航栏项目/链接来填充他们所在的整行。我尝试了很多不同的选项，比如bootstrap .justify-content-center但是由于某些原因它只是不会让步。

以下是我的导航栏的图片：

Navbar

这是html，虽然我在这里通过预输入流程运行它看起来与我的版本不同：

由于

＆＃13;
＆＃13; 
.btn-group-vertical > .btn-group::after, .btn-toolbar::after, .clearfix::after, .container-fluid::after, .container::after, .dl-horizontal dd::after, .form-horizontal .form-group::after, .modal-footer::after, .modal-header::after, .nav::after, .navbar-collapse::after, .navbar-header::after, .navbar::after, .pager::after, .panel-body::after, .row::after {
    clear: both;
}
.btn-group-vertical > .btn-group::after, .btn-group-vertical > .btn-group::before, .btn-toolbar::after, .btn-toolbar::before, .clearfix::after, .clearfix::before, .container-fluid::after, .container-fluid::before, .container::after, .container::before, .dl-horizontal dd::after, .dl-horizontal dd::before, .form-horizontal .form-group::after, .form-horizontal .form-group::before, .modal-footer::after, .modal-footer::before, .modal-header::after, .modal-header::before, .nav::after, .nav::before, .navbar-collapse::after, .navbar-collapse::before, .navbar-header::after, .navbar-header::before, .navbar::after, .navbar::before, .pager::after, .pager::before, .panel-body::after, .panel-body::before, .row::after, .row::before {
    display: table;
    content: " ";
}
::after, ::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
element {
}
.navbar-inverse {
    background-color: #1c75bc;
    border-color: #1c75bc;
}
.navbar {
    border-radius: 4px;
}
.navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: 20px;
    border: 1px solid transparent;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    font-size: 14px;
    font-family: Poppins;
    font-weight: 400;
    line-height: 24px;
    color: #777;
}
body {
    text-rendering: optimizeLegibility !important;
    line-height: 24px;
}
body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
}
html {
    font-size: 10px;
}
html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
}
＆＃13; 
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li><a href="#" style="color:#ffffff"><i class="fa fa-certificate fa-lg" aria-hidden="true"></i> Free Golf Trip Information</a></li>
        <li><a href="#" style="color:#ffffff"><i class="fa fa-certificate fa-lg" aria-hidden="true"></i> 
Special Offers</a></li>
        <li><a href="#" style="color:#ffffff"><i class="fa fa-certificate fa-lg" aria-hidden="true"></i> Request a callback</a></li>
        <li><a href="#" style="color:#ffffff" target="_blank"><i class="fa fa-certificate fa-lg" aria-hidden="true"></i> Like Us</a></li>
        <li><a href="#" style="color:#ffffff" target="_blank"><i class="fa fa-certificate fa-lg" aria-hidden="true"></i> Join Mailing List</a></li>
    </ul>
  </div>
</nav>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：0)

从bootstrap示例中查看合理的导航栏： https://getbootstrap.com/docs/4.0/examples/justified-nav/

您必须添加此自定义CSS：

@media (min-width: 768px) {
  .navbar-nav {
    display: -ms-flexbox;
    display: flex;
  }

  .navbar-nav .nav-item {
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
  }
}

如果您使用的是Bootstrap 3.3：https://getbootstrap.com/docs/3.3/examples/justified-nav/

答案 1 :(得分：0)

试试这个。

Worksheets("Summary").ChartObjects("Chart").Activate
   ActiveChart.SeriesCollection.Add _
   Source:=Worksheets("Summary").Range("B2:B8")

答案 2 :(得分：0)

请查看以下代码段，

.btn-group-vertical > .btn-group::after, .btn-toolbar::after, .clearfix::after, .container-fluid::after, .container::after, .dl-horizontal dd::after, .form-horizontal .form-group::after, .modal-footer::after, .modal-header::after, .nav::after, .navbar-collapse::after, .navbar-header::after, .navbar::after, .pager::after, .panel-body::after, .row::after {
    clear: both;
}
.btn-group-vertical > .btn-group::after, .btn-group-vertical > .btn-group::before, .btn-toolbar::after, .btn-toolbar::before, .clearfix::after, .clearfix::before, .container-fluid::after, .container-fluid::before, .container::after, .container::before, .dl-horizontal dd::after, .dl-horizontal dd::before, .form-horizontal .form-group::after, .form-horizontal .form-group::before, .modal-footer::after, .modal-footer::before, .modal-header::after, .modal-header::before, .nav::after, .nav::before, .navbar-collapse::after, .navbar-collapse::before, .navbar-header::after, .navbar-header::before, .navbar::after, .navbar::before, .pager::after, .pager::before, .panel-body::after, .panel-body::before, .row::after, .row::before {
    display: table;
    content: " ";
}
::after, ::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
element {
}



* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    font-size: 14px;
    font-family: Poppins;
    font-weight: 400;
    line-height: 24px;
    color: #777;
}
body {
    text-rendering: optimizeLegibility !important;
    line-height: 24px;
}
body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
}
html {
    font-size: 10px;
}
html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
}
.navbar {
    border-radius: 4px;
}
.navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: 20px;
    border: 1px solid transparent;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
}
.nav>li {
  display: inline-block !important;
}
nav.navbar {
  background-color: #1c75bc;
  border-color: #1c75bc;
}
.navbar-nav {
  width: 100%;
}
.navbar-inverse {
    background-color: #1c75bc;
    border-color: #1c75bc;
}
@media (min-width: 992px) {
  .navbar-nav {
    display: -webkit-inline-flex;
      display: -moz-inline-flex;
      display: -mz-inline-flex;
      display: inline-flex;
      width: 100%;
      margin-bottom: 0;
      -webkit-justify-content: space-between;
      -moz-justify-content: space-between;
      -mz-justify-content: space-between;
      justify-content: space-between;
  }

}
@media (max-width: 992px) {
  .navbar-nav > li > a {
    padding: 12px;
  }
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li><a href="#" style="color:#ffffff"><i class="fa fa-certificate fa-lg" aria-hidden="true"></i> Free Golf Trip Information</a></li>
        <li><a href="#" style="color:#ffffff"><i class="fa fa-certificate fa-lg" aria-hidden="true"></i> 
Special Offers</a></li>
        <li><a href="#" style="color:#ffffff"><i class="fa fa-certificate fa-lg" aria-hidden="true"></i> Request a callback</a></li>
        <li><a href="#" style="color:#ffffff" target="_blank"><i class="fa fa-certificate fa-lg" aria-hidden="true"></i> Like Us</a></li>
        <li><a href="#" style="color:#ffffff" target="_blank"><i class="fa fa-certificate fa-lg" aria-hidden="true"></i> Join Mailing List</a></li>
    </ul>
  </div>
</nav>

希望这会对你有所帮助。

感谢。

相关问题
最新问题