html - 如何将 Bootstrap 框粘在一起?

标签 html css twitter-bootstrap

如何使用 bootstrap 和 css 将列粘在一起?

我想创建这样的东西:

enter image description here

我创建的内容:

enter image description here

这是我的 HTML 和 CSS 标记:

<div class="container">
    <div class="row">
        <div class="col-md-4 ">
            <div class="box1">
            <h1>this is box 1 one</h1>
            </div>
        </div>

        <div class="col-md-4 ">
            <div class="box2">
            <h1>this is box 1 one</h1>
            </div>
        </div>

        <div class="col-md-4 ">
            <div class="box3">
            <h1>this is box 1 one</h1>
            </div>
        </div>

    </div>
</div>

我的CSS

.box1 {
    background: red;
}

.box2{
    background: green;
}

.box3 {
    background: yellow;
}

我们将不胜感激!

最佳答案

根据您要实现的目标,有多种可能性。

如果您想消除设计中所有列之间的间隙(称为间距),您可以在 http://getbootstrap.com/customize/#grid-system 自定义您自己的 Bootstrap 您会看到需要设置为 0 的变量“@grid-gutter-width”。

如果你想让一些内容跨越排水沟,这样它们就可以接触到相邻的元素,使用一个类来否定排水沟。有点像

.no-pad{
    padding-left:0;
    padding-right:0;
}

然后将它添加到所有你想要的无间距的列。

如果您希望背景颜色相互接触,但仍要为您的文本保持良好的分栏,您可以简单地将背景样式应用于分栏本身。

关于html - 如何将 Bootstrap 框粘在一起?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41299448/

相关文章:

javascript - Bootstrap 自动在我的网页 Php 中隐藏我的图像

html - 使用 bootstrap 将登录表单置于屏幕中间

java - 什么 XPath 只选择 div 内的非标记文本。 Selenium 。 java

带有底部箭头的 HTML 注释框

html - <ul> 干扰 <a> 标签

jquery - 使用 Perfect-scrollbar 插件在同一页面中添加多个滚动条

javascript - 是否可以使多个 Bootstrap 弹出窗口更干?

java - 如何使用 Webfirmframework 将组件添加到现有 HTML?

jQuery 在特殊字符前的 H1 中插入 SPAN

CSS:如何将我的幻灯片计数器放在幻灯片中