Question

在下面的Bootstrap 3代码中，我试图让第3列不堆叠。我希望它始终保持在最右上方，就像最左边的列保持在左上角一样。有一个简单的方法吗？我想只是从引导程序中排除那个部分并且只是将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

Bootstrap 3秒列折叠..第三列浮右

1 个答案: