按屏幕大小定位元素

Question

我正试图在导航栏中放置一个div 在桌面视图中，它应该是第二个正确的元素，这是实现的 在移动视图中，我希望它位于中心 如何实现这一点。

期望的输出

<div class="container" id="main">    
 <div class="navbar navbar-fixed-top">
   <div class="container">
     <button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
     </button>
   <div>
   <a class="navbar-brand" href="/"><span>CANDY STORE</span></a>                    
   </div>
   <div class="nav-collapse collapse navbar-responsive-collapse">
    <ul class="nav navbar-nav pull-right">
     <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span>&nbsp;<strong class="caret" style="margin-top:-4px"></strong></a>

      <ul class="dropdown-menu">
       <li><a href="#"><span class="glyphicon glyphicon-wrench"></span> My Account</a></li>
       <li class="divider"></li>
       <li><a href="#"><span class="glyphicon glyphicon-off"></span> Sign out</a></li>
    </ul>
   </li>
  </ul><!-- end nav pull-right -->
 </div><!-- end nav-collapse -->
<div style="line-height:48px;" class="pull-right">Administrator</div>
</div><!-- end container -->
</div><!-- end navbar -->
</div><!-- end #main-->

https://jsfiddle.net/vgbx10sb/

Answer 1

只需添加媒体查询并将.pull-right的宽度更改为100％。现在你可以为.pull-right设置text-align：center。

@media (max-width: 320px) {
  .pull-right {
    width: 100%;
    text-align: center;
  }
}
.pull-right {
  background: red;
}

https://jsfiddle.net/e6pn5sy2/