Bootstrap CSS表单类覆盖了btn类，用于提交按钮样式

Question

我使用laravel创建一个使用bootstrap css设计的表单。

{!! Form::open(['url' => '/hold', 'method' => 'POST', 'class' => 'form-horizontal']) !!}

    <div class="form-group">
        {!! Form::label($detail->name, NULL, array('class'=>'control-label')) !!}
        {!! Form::text('detail['.$detail->name.']', null, ['class' => 'controls']) !!}
    </div>

    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
    {!! Form::submit('Hold', ['class'=>'btn btn-danger', 'style' => 'float:right;']) !!}

{!! Form::close() !!}

根据Chrome开发者工具，覆盖.btn样式规则的css选择器为button, html input[type="button"], input[type="reset"], input[type="submit"]

我猜测html input类优先于btn类。我不知道如何防止这种情况并强制btn优先。

Answer 1

使用具有自定义类的div包装整个表单 - 将其命名为TreeView { id:treeviewID anchors.fill: parent model: theModel style: styleTreeView selection: ItemSelectionModel{ id:sel model: theModel } headerVisible : true selectionMode: SelectionMode.SingleSelection onDoubleClicked:{ console.log("parent Name of the Item selected : ",?????) } TableViewColumn { role: "name_role" title: valueSelected } } - 然后覆盖自定义容器中的样式。如果您使用Sass，这非常简单，但如果您使用CSS则不会太难。

HTML - 只需添加自定义类：

.form-container

萨斯：

{!! Form::open(['url' => '/hold', 'method' => 'POST', 'class' => 'form-horizontal form-container']) !!}

    <div class="form-group">
        {!! Form::label($detail->name, NULL, array('class'=>'control-label')) !!}
        {!! Form::text('detail['.$detail->name.']', null, ['class' => 'controls']) !!}
    </div>

    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
    {!! Form::submit('Hold', ['class'=>'btn btn-danger', 'style' => 'float:right;']) !!}

{!! Form::close() !!}

CSS：

.form-container {
  input[type="reset"] {
    // style here
  }
}

Answer 2

尝试在按钮中添加.btn-sm

<button type="button" class="btn btn-primary btn-sm" data-dismiss="modal">Close</button>