css - Bootstrap 3 第二列折叠..第三列向右浮动

Question

在下面的 Bootstrap 3 代码中，我试图让第 3 列不堆叠。我希望它始终保持在右上角，就像最左边的列保持在左上角一样。有简单的方法吗？我考虑过从 bootstrap 中排除该部分，然后将 css 应用到右浮动，但在 Bootstrap 中，我肯定可以做到这一点。

<header id="t3-header" class="container t3-header">
<div class="row">

    <!-- LOGO -->
  <div class="col-xs-12 col-md-2 logo"> I stay always top left</div> 

 <div class="col-xs-12 col-md-8">  I should stackunder 1st column as browser resizes </div>   

       <!-- I want this column to not stack below column 2 as the browser resizes. -->
       <div class="col-xs-12 col-md-2"> 
        I should always stay top right
            <div class="row">
                <div class="col-lg-6"> </div>
                 <div class="col-lg-6"> </div>
            </div>
        </div>
 </div>

Answer 1

如果我没理解错的话，您必须让“右上角”div 在级联中首先出现。为此，首先将它作为第一列，然后您可以使用 pull-left 和 pull-right 辅助类来欺骗前两列:

其次，您可以删除示例中的 col-xs-12:

<header id="t3-header" class="container t3-header">
    <div class="row">

        <div class="col-md-2 pull-right">
            I should always stay top right
            <div class="row">
                <div class="col-lg-6"></div>
                <div class="col-lg-6"></div>
            </div>
        </div>

        <!-- LOGO -->
        <div class="col-sm-12 col-md-2 logo pull-left">
             I stay always top left
        </div>

        <div class="col-sm-12 col-md-8 pull-left">
             I should stackunder 1st column as browser resizes
        </div>

    </div>
</div>

示例: http://www.bootply.com/ee3E67pujY