Question

我是bootstrap的新手，我正在尝试一些事情并发现问题

我有一个2个不同的navbar-header类，我想将它放在左侧和右侧，我希望它能够响应

<nav class="navbar navbar-default navbar-fixed-top topnav " style="opacity:0.8" role="navigation">
    <div class="container " >
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <a class=" topnav" href="#">image1</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="navbar-right" >
            <a class=" topnav" href="#">image2</a>
        </div>

    </div>
    <!-- /.container -->
</nav>

当我在移动设备上查看时，查看右手部分会显示在底部，但我希望它在移动设备和桌面视图中保持最佳状态

http://plnkr.co/edit/g1CwhhyDrSoVf3zTRl6E?p=preview

非常感谢任何帮助致谢

Answer 1

尝试将它们连续包装在col-xs- * classes

中

<nav class="navbar navbar-default navbar-fixed-top topnav "     style="opacity:0.8" role="navigation">
    <div class="container" >
      <div class="row">

        <div class="col-xs-6">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
              <a class=" topnav" href="#">image1</a>
          </div>              
        </div>

        <div class="col-xs-6">
          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="navbar-right" >
              <a class=" topnav" href="#">image2</a>
          </div>              
        </div>

      </div><!--./row-->
    </div><!--./container-->
</nav>

Answer 2

<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top topnav " style="opacity:0.8" role="navigation">
    <div class="container " >

      <div class=row>

        <div class="col-xs-6">
          <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <a class=" topnav" href="#">image1</a>
        </div>
        </div>


        <div class="col-xs-6">
          <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="navbar-right" >
            <a class=" topnav" href="#">image2</a>
        </div>
        </div>

      </div>

    </div>
    <!-- /.container -->
</nav>

这不是最好的选择，但试试这个=）

bootstrap navbar-right not working

2 个答案: