Question

我有这个HTML代码：

<%= form_for "/cats/#{cat_id}" do |f| %>
  <%= date_field_tag :as_of_date, Date.new(2015, 10, 13) %>
  <%= f.submit 'Re-calculate' %>
<% end %>

除了在手机上，我希望这些列能够逐行转到新行。这可能吗？

由于

Answer 1

您可以使用以下内容：

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3>
        Content
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3>
        Content
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3>
        Content
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3>
        Content
    </div>
</div>

Answer 2

如果我理解正确，你想要输出

1 2 3 4

中等屏幕尺寸，

1 2
3 4

小屏幕尺寸和

超小屏幕尺寸

您可以使用col-xs-12，col-sm-6和col-md-3类完成此操作，如下面的代码。

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-3">
            1
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3">
            2
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3">
            3
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3">
            4
        </div>        
    </div>
</div>

这是JSFiddle的链接。

Answer 3

在这里，看看这个。您可以使用4列PC，2列用于小型设备，1列用于超小型设备（如移动设备）。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
        <div class="row fluid">
            <div class="col-xs-12 col-sm-6 col-md-3 clearfix">
                    <img src="img">
                    <div class="img-text"> 
                        Tekst fdskfjsdghdfn ufghdg ufdhs gdfksjhg 
                      jfdksgbfjdsk gfd jgbdfjhg dfkjhg fidughdf kjvhdf ugdfh 
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3 clearfix">
                    <img src="img">
                    <div class="img-text"> 
                        Tekst fdskfjsdghdfn ufghdg ufdhs gdfksjhg 
                      jfdksgbfjdsk gfd jgbdfjhg dfkjhg fidughdf kjvhdf ugdfh 
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3 clearfix">
                    <img src="img">
                    <div class="img-text"> 
                        Tekst fdskfjsdghdfn ufghdg ufdhs gdfksjhg 
                      jfdksgbfjdsk gfd jgbdfjhg dfkjhg fidughdf kjvhdf ugdfh 
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3 clearfix">
                    <img src="img">
                    <div class="img-text"> 
                        Tekst fdskfjsdghdfn ufghdg ufdhs gdfksjhg 
                      jfdksgbfjdsk gfd jgbdfjhg dfkjhg fidughdf kjvhdf ugdfh 
                </div>
            </div>
        </div>

为了更好地理解其工作原理，请查看bootstrap的文档 - http://getbootstrap.com/css/#grid-example-mixed-complete

我可以在较小的屏幕上将引导列逐个转到下一行吗？

3 个答案: