html - Bootstrap Col vs Webkit 专栏

标签 html css twitter-bootstrap

<分区>


想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post .

关闭 7 年前

我一直遇到这个问题,我总是使用 webkit-columns 解决它。但我想知道使用 Bootstrap 是否有更好的方法。

网格内有 4 个框。

<div class="row">
  <div class="col-sm-3"></div>
  <div class="col-sm-3"></div>
  <div class="col-sm-3"></div>
  <div class="col-sm-3"></div>
</div>

这给了我 4 个框,但最后一个框的边距比其他框多。我希望它们都具有相同的边距,但像图像一样在 Angular 上为 0:

---编辑澄清---

为了澄清我的问题,我要添加这个 jsfiddle你看到蓝框了吗?我想让红色框以蓝色框开始和结束,你能做到吗?不向蓝色框添加边距,蓝色框必须为 100%,另一个框必须与该框的第一个和最后一个对齐
在这里我做我想做的:Jsfiddle但我在这里使用 -webkit-column 只是为了向您展示,如果您可以使用 bootstrap 做到这一点,那就太好了。


Columns

最佳答案

我要分享这个 Demo我创建。我希望它能带你到某个地方。

HTML

<div class="container">
     <div class="row">
        <div class="col-sm-3 custom-col">
            <div class="child-div">

            </div>
        </div>
        <div class="col-sm-3 custom-col">
            <div class="child-div">

            </div>
        </div>
        <div class="col-sm-3 custom-col">
            <div class="child-div">

            </div>
        </div>
        <div class="col-sm-3 custom-col">
            <div class="child-div">

            </div>
        </div>
    </div>
</div>

CSS

.col-sm-3.custom-col{
    height:250px;
    /* outline: 1px solid green; */
    padding: 5px;
}

.child-div{
    height:100%;
    width:100%;
    background-color:red;
}

更新

我更新了 fiddle 。 HERE

关于html - Bootstrap Col vs Webkit 专栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32126571/

上一篇:css - 垂直对齐另一个 div 内的 div,3 行代码不起作用

下一篇:javascript - 使用 Jquery 悬停所有子元素

相关文章:

html - css定位下拉子菜单

jquery - 网页背景色闪

javascript - eBay 和 Bootstrap : collapse menu in javascript

javascript - 如何配置 Bootstrap 镜像?

javascript - 使用 Url 中的哈希值重新加载页面 (F5)

javascript - 是否可以在 Visual Studio 中突出显示某些代码行?

javascript - 如何使可滚动的 div 在滚动时扩展到全高并单击

html - Bootstrap 轮播背景图片不显示

javascript - 无法重复使用弹出嵌入的 TinyMCE 编辑器

html - CSS 样式覆盖不适用于移动浏览器