這個是我一個頁面中的一小格,程式碼如下
<div class="row-flex">
<div class="col-label">
<label class="control-label">藥囑</label>
<button type="button" name="AddOrder" data-content="@Model.MED_ORDER" class="fn-phrase btn btn-default" data-toggle="modal" data-target="#Phrase_Dialog">片語</button>
</div>
<div class="col-input">
@Html.CTextAreaFor(m => m.vHD.MED_ORDER, hStatus, new { @class = "form-control odrtextarea", @id = "HD_DescContest", @rows = "9" })
</div>
</div><!-- /.row -->
我希望能把片語這個按鈕放在藥囑這個字的下面,而不是右邊,可是我在按鈕這邊
加上或都沒效果,請問這部分我該如何修改呢?
一般來說,你要先了解 bootstrap 中各項應用的做法。
大多數來說。當你使用了 control-label 的應用,就是代表需要做直接接續不換行。
但你的要求確是希望換行。也就是說再一開始就用錯了排板參數。
必要性的情況下是要選用其它的排板應用來達到你的需求。
千萬不要想用style的強制性排版方式來解決 bootstrap 的排版需求。
一般 bootstrap 並不會有問題,有問題的是用錯了對應排板應用的參數。
畢竟強制性style的寫法。很容易破壞 bootstrap 原先一些智能應用化的做法。
一但被style刷掉。那bootstrap就不是bootstrap了。你等於破壞它了。
給你兩個寫法參考
1 .
用 css 的 display: block;
2 .
再用一個 row
code
<div class = "row">
<div class = "col-sm-12">
<label class="control-label" style = "display:block">藥囑</label>
<button
type = "button"
name = "AddOrder"
class = "fn-phrase btn btn-outline-success"
data-toggle = "modal"
data-target = "#Phrase_Dialog">片語</button>
</div>
</div>
<hr>
<div class = "row">
<div class = "col-sm-12">
<label class="control-label" style = "display:block">藥囑</label>
<div class = "row">
<div class = "col-sm-12">
<button
type = "button"
name = "AddOrder"
class = "fn-phrase btn btn-outline-success"
data-toggle = "modal"
data-target = "#Phrase_Dialog">片語</button>
</div>
</div>
</div>
</div>