Question

我在Bootstrap 3中有以下代码。这一切都很完美，除非您在平板电脑上，徽标下降并且不会保持左上角。它在手机上运行良好，在桌面上运行良好....我缺少什么？

http://www.bootply.com/K3G0VtD0OS

<!-- always Stay top right and maintain the same size-->
  <div class="col-xs-6 col-sm-2 pull-right">

          <div class="row">

            <div class="pull-right"> sharing icons </div>

              <div class="">  account login </div>

 </div>

   <!-- LOGO Always stay top left no matter what size-->
   <div class="col-xs-2 col-sm-12 col-md-2 logo pull-left"> logo image </div> 

  <!-- Always stay to the right of logo but at tablet, drop below the 1st and second column -->

 <div class="col-xs-12 col-md-8 pull-left"> 

          <div class="row">
          <div class="col-xs-12 col-md-1"> </div>
          <div class="col-xs-12 col-md-11">  Search bar goes here </div>
  </div>

Answer 1

我相信这种情况正在发生，因为您只允许2个引导列用于BOTH＆＃34;共享图标＆＃34;和＆＃34;帐户登录＆＃34;。因此，当您达到平板电脑尺寸时，2列不够空间，它包装了＆＃34;帐户登录＆＃34; （它不包装＆＃34;共享图标＆＃34;因为该元素上有pull-right类。）

您可以通过在col-sm（平板电脑尺寸）中将搜索栏的不必要的8列减少到7来解决此问题，以便＆＃34;共享图标＆＃34;和＆＃34;帐户登录＆＃34;可以有3列而不是2列，同时允许它在col-md和更高的位置仍为8。

Updated bootply

改变一：

<div class="col-xs-6 col-sm-3 col-md-2 pull-right"> <!-- Change col-sm-2 to col-sm-3 and add col-md-2 -->

    <div class="row">

        <div class="pull-right"> sharing icons </div>

        <div class="">  account login </div>

    </div>

</div>

改变二：

<div class="col-xs-12 col-sm-7 col-md-8 pull-left"> <!-- Add col-sm-7 -->

    <div class="row">
        <div class="col-xs-12 col-md-1"> </div>
        <div class="col-xs-12 col-md-11">  Search bar goes here </div>
    </div>

</div>

Bootstrap 3堆叠问题 - 第一次降落在中等

1 个答案: