logo标签列表

如何使Bootstrap列在所有设备上响应式？

htmlcsstwitter-bootstrap
5
我目前正在开发一个登录/注册页面，但我需要帮助处理列。在桌面1920x180上，该页面当前看起来像这样：http://prntscr.com/cl4ms8 我在两个表单上都使用了<div class="col-xs-6">，以便它们在页面上均匀分布。如何使其在所有设备上都具有响应性，因为它当前在iPhone 6上的显示效果如下：http://prntscr.com/cl4ndb
1
我们需要代码来帮助您解决问题，请参考如何创建一个最小、完整且可验证的示例。 - Khaled Mashaly
嗨，Zac，好的，引导程序正在执行它应该做的事情。基本上你所说的是，我希望这个div在所有大于xs（0px）的设备上占父元素的50％。我建议你将类更改为：<div class="col-sm-6">或者如果那不够的话，使用col-md-6。（我希望这个元素在sm / md以上的设备上占50％的宽度）希望你觉得这很有用。 - Mihailo
4个回答
6

Bootstrap带有四个级别的网格，具有以下类前缀：

  • .col-xs-，（<768px）

  • .col-sm-，（≥768px）

  • .col-md-，（≥992px）

  • .col-lg-，（≥1200px）

如果您应用了“col-xs-6”列类，则表示从0px到767px，我希望此列占容器宽度的50％。除非您为下一个网格层添加另一个类，否则在更宽屏幕上它仍将是父级50％。因此不仅仅在768px范围内，在加入另一个类之前也是如此。

您在这里遇到的问题是，大多数手机屏幕太窄，无法显示两列以达到此目的。因此，请将“col-xs-6”更改为“col-xs-12”。还要添加“col-sm-6”。

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

这意味着从768px及以上，列宽将为50%。

布局看起来不正常的原因可能是您的输入框的宽度或最小宽度大于容器的50％宽度，因此比嵌套在其中的列网格更宽。

5

使用col-xx-n类的元素需要是具有container-fluid类的元素的子元素或后代元素。

因此，这将是响应式的：

<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>
4
使用bootstrap的类col-lg-6 col-md-6 col-sm-12 col-xs-12来对登录和注册的主要div进行布局，您可以参考网站http://getbootstrap.com/css/#grid和http://getbootstrap.com/css/#forms。
 <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>
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接