簡體   English   中英

引導式推拉

[英]Bootstrap pull and push

我正在努力引導Bootstrap的push和push方法。 我一直在玩,切換2個div時我得到一個很好的工作示例。 我了解那部分。

但是我想要達到的目標需要額外的要素。

  <div class="row">
<div class="col-md-6 " style="background-color:grey;">TEXT</div>
<div class="col-md-6 col-md-push-12 " style="background-color:lavender;">IMAGE</div>
<div class="col-md-12 col-md-pull-12" style="background-color:lavenderblush;">FORM</div>
</div>

我知道上面的示例是錯誤的,我故意在12列添加了div表單,將其推到圖像和文本div下方,我想要實現的是:

桌面:

[文字] [圖片]

[........形成........]

移動:

[文字]

[表格]

[圖片]

從我看到的內容中,我需要在文本div中添加一些內容,我認為呢?

我想如果是col-lg-6那么您可以通過col-push-lg-6.推動此列col-push-lg-6. 您不能將列加倍使用。使用給定的示例作為其工作方式的參考。

如果還不夠,請從給定鏈接中查看DrGeneral給出的示例:

http://stackoverflow.com/questions/18057270/column-order-manipulation-using-col-lg-push-and-col-lg-pull-in-twitter-bootstrap

<div class="row">

    <div class="col-sm-6">
        Text
    </div>

    <div class="col-sm-12 col-sm-push-12">
        Image
    </div>

    <div class="col-sm-12 col-sm-pull-12">
        Form
    </div>


</div>

希望此鏈接和示例有效.....

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM