Question

如何自定义带有边距两侧的导航栏（bootstrap）。提前谢谢。

 <div class="navbar navbar-inverse navbar-static-top">
      <div class="container">
           <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                 </button>
                 <a href="#" class="navbar-brand">COMPANY</a>
           </div>
           <div class="collapse navbar-collapse navHeaderCollapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Home</a></li>
                </ul>
           </div>
       </div>
</div>

Answer 1

.navbar{
left:100px;
right:100px;
}

Answer 2

试试这个。添加css style =＆＃34; margin-left：10px;保证金权利：10px;＆＃34;到div导航栏见下面的代码。

<div class="navbar navbar-inverse navbar-static-top style="margin-left: 10px; margin-right: 10px;">

公司

主页

Answer 3

.navbar.navbar-static-top {
    margin:0 auto; /*center the element*/
    width: 80% !important;/* customize width you want */
}

.navbar.navbar-static-top .container /*overwrite bootstrap style*/
{
width:100%!important;
 }

或尝试此代码 ！重要标记在页面中需要时

.navbar-static-top
{
width:80%;
margin:0 auto;
}
.navbar-static-top .container
{
width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar navbar-inverse navbar-static-top">
            <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a href="#" class="navbar-brand">COMPANY</a>
                    </div>
                <div class="collapse navbar-collapse navHeaderCollapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Home</a></li>
                    </ul>
                </div>
            </div>
        </div>

Answer 4

尝试在CSS中执行此操作：

.navbar {
  margin-left: 100px;
  margin-right: 100px;
}

Answer 5

    .navbar
    {
    margin-left:100px;
    margin-right:100px;
    }

Answer 6

为了满足移动响应，请尝试使用此CSS：

.navbar {
    display: inline-block;  /*to make sure .navbar accepts width*/
    margin-left: 5%;
    margin-right: 5%;
    width: 90%;
}

Answer 7

我不确定你的问题。您是否要求在导航栏和html正文之间留出空格？或者您的导航菜单中需要空格？如果菜单和html主体之间需要空格，请执行以下操作

<div class="row">
  <div class="col-lg-1 hidden-sm hidden-xs"></div>
  <div class="col-lg-10 col-xs-12 col-sm-12">
     <div class="navbar navbar-inverse navbar-static-top">
       <div class="container">
         <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
             </button>
             <a href="#" class="navbar-brand">COMPANY</a>
       </div>
       <div class="collapse navbar-collapse navHeaderCollapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Home</a></li>
            </ul>
       </div>
   </div>
</div>

只需检查此添加或删除col以增加或减少导航栏的宽度..

OR

只需在容器中添加您的编码，以便您可以在任一方向获得空格

两边都有边距的bootstrap导航栏

7 个答案: