相关疑难解决方法(0)

如何从boostrap container-fluid类及其行中删除所有边距？

.container-fluid { padding: 0;}

这基本上是我想要的,但它增加了20px溢出到身体.我应该这样做:

body, html { overflow-x: hidden; }

做点什么 .container-fluid > .row

我按照下面的方式划分了Bootstrap网格列.

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">A</div>
        <div class="col-md-6">
            <div class="col-md-12">B1</div>
            <div class="col-md-12">
                <div class="col-md-8">B1.1</div>
                <div class="col-md-4">B1.2</div>
            </div>
            <div class="col-md-12">
                <div class="col-md-10">B2.1</div>
                <div class="col-md-2">B2.2</div>
            </div>
        </div>
        <div class="col-md-3">C</div>
    </div>
</div>

请在下面找到此代码的可视布局.

我划分网格列的方法是正确还是错误？

我正在尝试创建一个包含输入组的表单.我使用'col'-class of bootstrap来设置它的样式,但是当它与'input-group'类结合使用时,列的填充将被删除.

我想将日期和名称输入字段对齐.

这是我的JSFiddle

HTML

<div class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-2 col-xs-2 control-label">Date</label>
        <div class="col-sm-4 col-xs-4 input-group">
            <input type="text" class="form-control" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 col-xs-2 control-label">Name</label>
        <div class="col-sm-4 col-xs-4">
            <input type="text" class="form-control" />
        </div>
    </div>
</div>
<br><br>
<div class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-2 col-xs-2 control-label">Date</label>
        <div class="col-sm-4 col-xs-4">
            <input type="text" class="form-control" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 col-xs-2 control-label">Name</label>
        <div class="col-sm-4 col-xs-4"> …

Bootstrap col-xx 类中定义的内容padding有时会在小屏幕上浪费空间，因此我想通过将 col-xx 与某些 css 设置嵌套来删除填充，如下所示：

<style>
div[class^=col-] > div[class^=col-] {
    padding-left: 0px;
    padding-right: 0px;
}
</style>

<div class="row">
    <div class="col-xs-12">
        <div class="col-xs-4">a</div>
        <div class="col-xs-4">b</div>
        <div class="col-xs-4">c</div>
    </div>
</div>

我的实现看起来还好吗？直接嵌套 col-xx 是否存在潜在的样式问题？