Question

我有一些小的引导问题，我似乎无法解决。

我希望徽标和右侧显示的文字只显示在左侧而不是中心。（我试过拉 - 没有运气）
我希望汉堡包菜单出现在最右边，在我将导入栏中添加了visible-sm-block和visible-lg-block切换后，它出现在中心。我添加它因为它没有显示在手机屏幕上???我需要它才能在平板电脑和小型设备上显示。我试过拉右

＆＃13;

<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"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">

            <div class="container">
                <div class="navbar-header">
                <img alt="Logo" class="brnd" src="" height="30" /><span class="brnd2">| Specialty FORCES  </span>
                    <button type="button" class="navbar-toggle  visible-sm-block visible-xs-block" 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 class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="hidden-lg hidden-md hidden-sm"><a href="">1</a></li>
                        <li class="hidden-lg hidden-md hidden-sm"><a href="#">2</a></li>
                        <li class="hidden-lg hidden-md hidden-sm"><a href="#">3</a></li>
                        <li class="hidden-lg hidden-md hidden-sm"><a href="#">4</a></li>
                        <li class="hidden-lg hidden-md hidden-sm"><a href="#">5</a></li>
                         <li class="hidden-lg hidden-md hidden-sm"><a href="#">6</a></li>
                    </ul>
                </div>
            </div>
        </div>

＆＃13;

Answer 1

＆＃13;

.navbar-default .navbar-brand{padding-right: 70px;}
    .navbar-default .navbar-toggle{position: absolute;right: 0;}
    @media (max-width: 768px) {
    .navbar-toggle {
      display: block;
      position: absolute;
      right: 0;
      top: 0;	
      float: none;
    }
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


             <nav class="navbar navbar-default" role="navigation">
                    <div class="navbar-header">
                      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#jb-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 class="navbar-header">
                  
                </div>
                  <a class="pull-left navbar-brand" href="#">
                        <span><img alt="Logo" class="brnd" src="" height="30" /></span>
                       |Specialty FORCES
                    </a>
                      
                      </div>
                    </div>
                    <div class="collapse navbar-collapse" id="jb-navbar-collapse">
                      <ul class="nav navbar-nav navbar-nav-fix">
           <li class="hidden-lg hidden-md hidden-sm"><a href="#">1</a></li>
           <li class="hidden-lg hidden-md hidden-sm"><a href="#">2</a></li>
           <li class="hidden-lg hidden-md hidden-sm"><a href="#">3</a></li>
           <li class="hidden-lg hidden-md hidden-sm"><a href="#">4</a></li>
           <li class="hidden-lg hidden-md hidden-sm"><a href="#">5</a></li>
           <li class="hidden-lg hidden-md hidden-sm"><a href="#">6</a></li>
                      </ul>
                    </div>
                  </nav>

＆＃13;

希望这可以解决您的问题

汉堡菜单问题和徽标问题

1 个答案: