【问题标题】:Bootstrap form page is not displayed properly on small size screensBootstrap 表单页面在小尺寸屏幕上无法正确显示
【发布时间】:2015-03-19 05:08:40
【问题描述】:

我正在编辑一个引导倒计时页面,目前我被这个表单卡住了。 虽然在大屏幕上看起来不错,但一旦我将它缩小到 800 像素以下,它就开始看起来更像这样了...... 有关修复它的任何建议?

代码如下:

<div id="wrapper">
    <div class="container">
        <div class="row">
            <div class="col-sm-12 col-md-12 col-lg-12">
                <h1>WeBuild</h1>
                <h2 class="subtitle">We're working hard to improve our website and we'll ready to launch after</h2>
                <div id="countdown"></div>
                <form class="form-inline signup" role="form">
                  <div class="form-group">
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter your email address">
                  </div>
                  <button type="submit" class="btn btn-theme">Get notified!</button>
                </form>     

            </div>                  

【问题讨论】:

标签: html css twitter-bootstrap


【解决方案1】:

根据Bootstrap docscol-xs-* 处理“超小”设备(小于 768 像素)。还有,

网格类适用于屏幕宽度大于或等于断点大小的设备,并覆盖针对较小设备的网格类。因此,例如如果.col-lg-* 类不存在,将任何.col-md-* 类应用于元素不仅会影响其在中型设备上的样式,还会影响大型设备上的样式。

换句话说,您不需要div 上的所有三个网格类。如果您希望它在所有设备上都成为 -col-12,请尝试:

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

编辑 - 修复了 Preben 发布的小提琴:http://jsfiddle.net/jxmoe88g/1/

【讨论】:

  • 很好的修复。接得好。我没有完全理解他在问什么:-)
  • @Preben 干杯。仅供参考,指向 Bootstrap 的外部文件链接已损坏,因为它里面有一些 &lt;link rel="" 垃圾。我抓住了直接 URL 并将其粘贴进去。
  • 我修复了课程,但主要问题仍然存在。在普通屏幕上,表单和按钮是内联的。一旦我缩小屏幕尺寸 - 输入表单粘在屏幕左侧,但按钮保持居中。所以它们看起来像这样 --- __。当我缩小屏幕尺寸时,如何让它们保持内联或至少都居中?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2017-11-15
  • 2022-12-15
  • 2019-02-21
  • 2018-02-22
  • 1970-01-01
  • 2019-06-30
  • 1970-01-01
相关资源
最近更新 更多