具有徽标搜索和Bootstrap链接的响应式导航

时间:2016-08-18 14:59:57

标签: html css twitter-bootstrap

我正在尝试在Bootstrap中创建一个响应式标头,并且在使用移动设备时遇到问题 - 它看起来很适合大型显示器。这是我的布局html代码。我非常感谢你的帮助!图片低于代码。谢谢!!!

<section class="container">
<!--HEADER--> 
      <div class="row header" >
        <div class="col-md-6">
      <div class="logo">
          <img src="img/logo.png" class="img-responsive" >

          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div><!--/Logo--> 
        </div>
        <div class="col-sm-6 col-lg-6">

<!--Top Utility Links-->
      <div class="col-sm-12">    
          <ul class="utility">
          <li><a href="#">Home</a></li>
          <li><a href="#">contacts</a></li>
          <li><a href="#">Help</a></li>
          </ul>
      </div><!--/col-sm-12 UTILITY-->
<!--SEARCH-->      
      <div class="col-md-8 pull-right">
           <form class="navbar-form" role="search">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Search" name="q">
          <div class="input-group-btn">
          <button class="btn btn-default search" type="submit"> <i class="glyphicon glyphicon-search"></i> </button>

          </div>
          <!--/input-group-btn --> 
        </div>
        <!--/input group -->
      </form>
      </div><!--/col-sm-8 SEARCH-->
        </div>
   <!--     <nav class="navbar navbar-default" role="navigation">-->
     <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right ">
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">SERVICES</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">HISTORY <b class="caret"></b> </a>
              <ul class="dropdown-menu">
                <li><a href="#">Link</a></li>
                <li><a href="#">Another link</a></li>
                <li><a href="#">One More Link</a></li>

              </ul>
            </li>
          </ul>
 </div>
  <!--      </nav>-->
      </div>

image

0 个答案:

没有答案