Bootstrap中的嵌套行,具有交替填充

时间:2015-04-23 07:49:50

标签: css twitter-bootstrap-3

我有一些布局需要为“row”类的div容器提供不同的填充。例如那样

All Users

到目前为止,但我想为每一行实现不同的填充。外排根本没有填充。所以我像这样添加了一个“row-no-padding”类:

<div class="row row-no-padding">
    <div class="col-md7">
        test content
    </div>
    <div class="col-md5">
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group form-group-default">
                    {!! Form::label('ticket_reference', 'Ticket Referenz') !!}
                    {!! Form::text('ticket_reference', null, ['class' => 'form-control']) !!}
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group form-group-default">
                    {!! Form::label('eldis_reference', 'ELDIS Referenz') !!}
                    {!! Form::text('eldis_reference', null, ['class' => 'form-control']) !!}
                </div>
            </div>
        </div>
    </div>
</div>

但这是继承到我希望有不同填充的表单中使用的行。我该怎么做呢?

1 个答案:

答案 0 :(得分:1)

添加特定的className:

<div class="col-md5 class-with-no-padding">

所以你的CSS:

.class-with-no-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}