Question

我正在使用Bootstrap 3.x，左侧有一个带有徽标的导航栏，在桌面上运行良好：

[黑色矩形代表徽标。]

现在的问题是，当视口变窄并且导航栏切换到折叠模式时，徽标会一直推到视口的左边缘：

问题：如何在视口的左边缘和移动设备上的徽标之间保持一个小的间隙？如果我只是在徽标本身上添加左边距或左边距，那么也将应用于第一个cenario（即在桌面上）并打破徽标与页面上主容器边缘的当前对齐。

CODE：

<html>
<body>

    <!-- This navigation bar should be replicated across all site pages. 
    On each page, remember to move the "active" class to the <li> element that points to
    the current page.-->

    <div id="navigation_bar" class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
        <a class="navbar-left" href="/"><img id="logo_navbar" height="110px" src="/img/logo-test-bg.png"></a>
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

        </div>
        <div id="navigation_bar_rhs" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="/">1</a></li>
            <li><a href="/">2</a></li>
         </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>


<div id="main_container" class="container">

   <div class="row"> <!-- 1st row -->
   </div> <!-- end of 1st row -->
</div> <!-- end of main_container -->

</body>
</html>

Answer 1

试试这个CSS

 @media only screen and (max-width: 480px) {
 .navbar-left {
         margin-left: 10px;
        }
    }

如果您想在更高的视口上设置边距，只需将480替换为其他值。
工作codepen

Answer 2

您将要研究媒体查询，并在导航栏类中使用max-width。

@media only screen and (max-device-width: 480px) {
 .nav-bar brand {
         padding: 5%;
         margin-left: 5%;
        }
    }

而不是指定在您上面使用的设备，而是指定屏幕的宽度。

MDN Explanation

boostrap：为什么我的导航栏徽标撞击了视口的左边缘？

2 个答案: