问引导3第二列折叠。第三列浮动右
EN

Stack Overflow用户

提问于 2014-05-30 11:22:02

回答 1查看 1.2K关注 0票数 1

在下面的引导程序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>

css

twitter-bootstrap

twitter-bootstrap-3

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-05-30 11:30:49

如果我对你的理解是正确的，你必须让“右上角”的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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/23953417

复制

相似问题

问引导3第二列折叠。第三列浮动右
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导3第二列折叠。第三列浮动右EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导3第二列折叠。第三列浮动右
EN