iT邦幫忙

0

bootstrap 排版請問

https://ithelp.ithome.com.tw/upload/images/20190610/20110132ptVfZt6QoS.jpg

這個是我一個頁面中的一小格,程式碼如下

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

我希望能把片語這個按鈕放在藥囑這個字的下面,而不是右邊,可是我在按鈕這邊
加上或都沒效果,請問這部分我該如何修改呢?

2
浩瀚星空
iT邦大師 1 級 ‧ 2019-06-10 14:21:41
最佳解答

一般來說,你要先了解 bootstrap 中各項應用的做法。
大多數來說。當你使用了 control-label 的應用,就是代表需要做直接接續不換行。
但你的要求確是希望換行。也就是說再一開始就用錯了排板參數。

必要性的情況下是要選用其它的排板應用來達到你的需求。

千萬不要想用style的強制性排版方式來解決 bootstrap 的排版需求。
一般 bootstrap 並不會有問題,有問題的是用錯了對應排板應用的參數。
畢竟強制性style的寫法。很容易破壞 bootstrap 原先一些智能應用化的做法。
一但被style刷掉。那bootstrap就不是bootstrap了。你等於破壞它了。

0
dragonH
iT邦新手 1 級 ‧ 2019-06-10 14:02:43

codepen

給你兩個寫法參考

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>

其實教用 style = "display:block" 並不太好。
因為與其這樣倒不如不要用control-label還比較快。

dragonH iT邦新手 1 級 ‧ 2019-06-10 14:24:26 檢舉

好像也是/images/emoticon/emoticon12.gif

0
samte1968
iT邦新手 5 級 ‧ 2019-06-10 14:13:41

我要發表回答

立即登入回答