在引导程序中安排列

我需要连续三列col3大小。我也需要它们至少分隔col2的大小。也就是说，第一列和第三列必须分别设置在容器的左侧和右侧，而中间的两侧将具有相等的边距。在引导程序中安排列

Bootstrap最新版本如何实现？

2014-02-20 user3008290

这是一个足够复杂的问题，您应该发布一些代码，这些代码来自您的尝试。我可能会从'.pull-left'和'.pull-right'开始，而没有'.container'。 – isherwood

你可以使用（带或不带.container）：

<div class="container"> 
    <div class="col-left col-xs-12 col-md-3">LEFT</div> 
    <div class="col-center col-xs-12 col-md-3">CENTER</div> 
    <div class="col-right col-xs-12 col-md-3">RIGHT</div> 
</div>

使用自定义CSS，使其工作：

@media (min-width: 992px) { 
    .col-left { 
    float: left; 
    } 
    .col-center { 
    position: absolute; 
    top: 0; 
    left: 50%; 
    margin-left: -12.5%; 
    } 
    .col-right { 
    float: right; 
    } 
}

Bootply

来源

2014-02-20 16:20:11 zessx

谢谢你的答案。当屏幕尺寸减小时，抵消中间栏可能会产生问题。同样的问题也发生在应用50％的情况下。我需要针对所有屏幕尺寸的解决方案。 – user3008290

标准引导版本是一个12列设置。用3列col-XX-3和col-XX-offset-2加起来13列（3 + 2 + 3 + 2 + 3 = 13）。您需要创建一个包含13列的自定义引导程序。

要实现您的期望效果，请使用col-XX-offset-*，其中XX是屏幕尺寸（lg，md，sm，xs），而*是偏移量。 col-XX-offset-*抵消了右边的*。

因此，为了得到你想要你的代码看起来像这样的外观：

<div class="container"> 
    <div class="row"> 
    <div class="col-md-3" style="background: #333; height:250px;"></div> 
    <div class="col-md-3 col-md-offset-2" style="background: #666; height:250px;"></div> 
    <div class="col-md-3 col-md-offset-2" style="background: #999; height:250px;"></div> 
    </div> 
</div>

同样，除非你有你的列和偏移量加起来12要使自定义引导13这不会为你工作列构建请按照下列步骤操作：

转到这里http://getbootstrap.com/customize/#grid-system
变化@grid-columns至13
滚动到b然后单击“编译并下载”
将旧的.css和.js替换为新下载的文件。

我希望这会有所帮助。这是获得所需外观的最佳方法，并确保内容列之间始终存在2列的偏移量。

注意：您可以从col-md-3 divs中删除style属性。他们就在那里，所以可以看到列。

来源

2014-02-20 17:27:58 theRyanMark

在引导程序中安排列

回答

相关问题