Bootstrap

css

居中显示

.parent-container{
    position: relative;
}
.child-container{
    position: absolute;
    top:0;
    right:0;
    width: 100%;
    text-align: center;
}

可见

visible-xs
hidden-xs

标题栏

 <header>
    <nav id="header-nav" class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand pull-left" href="index.html" >Food, LLC</a>
        </div>
        <div class="collapse navbar-collapse" id="navbar-collapse">
            <ul id="nav-list" class="nav navbar-nav navbar-right">
              <li><a href="#chicken" class="visible-xs">Chicken</a></li>
              <li><a href="#" class="visible-xs">Beef</a></li>
              <li><a href="#" class="visible-xs">Sushi</a></li>
            </ul>
     </div> 
    </nav>
  </header>