twitter-bootstrap 如何使 Bootstrap 列在所有设备上响应？

How do i make Bootstrap columns responsive on all devices?

提问by Viole

I'm currently developing a Login/Register page but I need help with the columns. The page currently looks like this on desktop 1920x180: http://prntscr.com/cl4ms8

我目前正在开发登录/注册页面，但我需要有关列的帮助。该页面目前在桌面 1920x180 上看起来像这样：http://prntscr.com/cl4ms8

I am using <div class="col-xs-6">on both of the forms so they are evenly split on the page. How would I go across making it so it will be responsive on all devices as it currently looks like this on an iPhone 6: http://prntscr.com/cl4ndb

我<div class="col-xs-6">在两种形式上都使用，因此它们在页面上均匀分布。我将如何制作它，以便它可以在所有设备上响应，因为它目前在 iPhone 6 上看起来像这样：http: //prntscr.com/cl4ndb

采纳答案by Teddy

You elements with the col-xx-nclasses need to be children or descendants of an element with the class container-fluid.

具有col-xx-n类的元素必须是具有类的元素的子代或后代container-fluid。

So, this will be responsive:

因此，这将是响应式的：

<div class="container-fluid"> <div class="col-md-4">This div takes up 1/3 of the available width on a desktop</div> <div class="col-md-8">This div takes up 2/3 of the available width on a desktop</div> </div>

<div class="container-fluid"> <div class="col-md-4">This div takes up 1/3 of the available width on a desktop</div> <div class="col-md-8">This div takes up 2/3 of the available width on a desktop</div> </div>

回答by partypete25

Bootstrap ships with 4 tiers of grids, which have class prefixes of;

Bootstrap 附带 4 层网格，它们的类前缀为；

• .col-xs- , (<768px)

• .col-sm- , (≥768px)

• .col-md- , (≥992px)

• .col-lg- , (≥1200px)

• .col-xs- , (<768px)

• .col-sm- , (≥768px)

• .col-md- , (≥992px)

• .col-lg- , (≥1200px)

If you've applied a column class of "col-xs-6" what you are saying is that from 0px to 767px i want this column to be 50% of the containers width. And unless you add another class for the next grid tier, it will continue to be 50% of the parent on wider screens as well. So not only up to 768px but beyond unless you add another class.

如果您应用了“col-xs-6”的列类，那么您所说的是从 0px 到 767px 我希望此列是容器宽度的 50%。除非您为下一个网格层添加另一个类，否则在更宽的屏幕上它仍将是父级的 50%。因此，除非您添加另一个类，否则不仅可以达到 768 像素，而且可以超过 768 像素。

Your problem here is that most mobiles are simply too narrow to show two columns for this purpose. So change "col-xs-6"to "col-xs-12". And add "col-sm-6" as well.

您的问题是大多数手机都太窄了，无法为此目的显示两列。所以"col-xs-6"改为"col-xs-12". 并添加“col-sm-6”。

<div class="col-xs-12 col-sm-6">

That will mean that from 768px and up, the columns wil be 50%.

这意味着从 768px 起，列将是 50%。

The reason why the layout looks broken though is probably because your input's have a width or min-width that is greater than the 50% width of the container and are therefore wider than the column grid they are nested in.

布局看起来损坏的原因可能是因为您输入的宽度或最小宽度大于容器的 50% 宽度，因此比它们嵌套的列网格更宽。

回答by Nitrick

Use bootstap's class col-lg-6 col-md-6 col-sm-12 col-xs-12for both main div of login and registration is and you can reffer the site http://getbootstrap.com/css/#gridand http://getbootstrap.com/css/#forms

col-lg-6 col-md-6 col-sm-12 col-xs-12对登录和注册的主要 div使用 bootstap 的类，您可以参考该站点http://getbootstrap.com/css/#grid和http://getbootstrap.com/css/#forms

example:

例子：

 <div class="container-fluid">///or container   
         <div id="login" class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            ///your login form 
            </div>
        <div id="registration" class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            ///your registration form 
            </div>
</div>

回答by henry

Use a bootstrap grid: http://v4-alpha.getbootstrap.com/layout/grid/(that's the v4 documentation, but v3 (the standard) works the same and v4 documentation is better). See also w3schools' tutorial: http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp

使用引导网格：http: //v4-alpha.getbootstrap.com/layout/grid/（这是 v4 文档，但 v3（标准）的工作原理相同，v4 文档更好）。另见 w3schools 的教程：http: //www.w3schools.com/bootstrap/bootstrap_grid_basic.asp