Bootstrap CSS表格類是過度btn類提交按鈕樣式

我使用laravel創建一個窗體樣式與引導CSS。Bootstrap CSS表格類是過度btn類提交按鈕樣式

{!! 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優先。

來源

2015-11-02 Brent Connor

整個包住形式，有一個自定義類股利增加.btn-SM - 稱之爲.form-container - 然後定製容器內覆蓋風格。如果您使用的是Sass，這非常容易，但如果您使用CSS，則不會太困難。

HTML - 只需添加自定義類：

{!! 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() !!}

薩斯：

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

CSS：

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

來源

2015-11-02 17:37:58 staypuftman

CSS選擇器'.FORM容器button'沒有應用該樣式到提交按鈕。元素類型不是「按鈕」，而是「輸入」。我不想將樣式規則應用於表單中的所有輸入。 –

您可以針對容器中的特定輸入 - 我更新了代碼以向您展示如何。我在答案中解釋了同樣的模式。 – staypuftman

嘗試在你的按鈕

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

來源

2015-11-02 17:25:19 scaisEdge

Bootstrap CSS表格類是過度btn類提交按鈕樣式

回答

相關問題