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

Question

我有一些布局需要不同的填充类“行”的 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>

到目前为止，这是有效的，但我想为每一行实现不同的填充。外行应该完全没有填充。所以我像这样向它添加了一个类“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;
}