Bootstrap 中的嵌套行，交替填充

Question

我有一些布局需要 class "row" 的 div 容器的不同填充。比如像这样

<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>

到目前为止一切正常，但我想为每一行实现不同的填充。外行应该完全没有填充。所以我添加了一个 class "row-no-padding" 这样的：

.row-no-padding {
  [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

但这是继承到表单内使用的行，我想在其中使用不同的填充。我需要怎么做？

Answer 1

添加特定的类名：

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

所以你的 CSS:

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

Bootstrap 中的嵌套行，交替填充

Nested Rows in Bootstrap with alternating padding

css

twitter-bootstrap-3