bootstrap 排版請問

bootstrap html

tenno081 2019-06-10 13:48:52 ‧ 5030 瀏覽

分享至

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

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

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

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

3 個回答

㊣浩瀚星空㊣

iT邦大神 1 級 ‧ 2019-06-10 14:21:41

最佳解答

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

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

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

回應
分享
檢舉

登入發表回應

dragonH

iT邦超人 5 級 ‧ 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>