css - Bootstrap 3 堆叠问题 - 第 1 列落在介质上

Question

我在 Bootstrap 3 中有下面的代码。这一切都完美无缺，除非你在平板电脑上， Logo 会下降并且不会停留在左上角。它在手机上运行良好，在桌面上运行良好......我错过了什么？

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 个 Bootstrap 列用于“共享图标”和“帐户登录”。因此，当您达到平板电脑尺寸时，2 列空间不够，它会包装“帐户登录”(它不会包装“共享图标”，因为该元素上有 pull-right 类) .

您可以通过在 col-sm(平板电脑大小)中将搜索栏不必要的 8 列减少到 7 来解决这个问题，这样“共享图标”和“帐户登录”的包装器可以有 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>