css - Bootstrap 3.3.6 小屏幕上的响应式表单

标签 css forms twitter-bootstrap

我正在使用 Twitter Bootstrap 3.3.6。我是新手。我设计了一个包含以下输入字段的表单。

  <div class="form-group row">  
    <label for="address1" class="col-xs-2 col-md-1 control-label">Address 1:</label>
    <div class="col-xs-10 col-md-4">
      <input type="text" name="address1" id="" class="form-control" maxlength="55" value="" />
    </div>
    <label for="address2" class="col-xs-2 col-md-1 control-label">Address 2:</label>
    <div class="col-xs-10 col-md-4">
      <input type="text" name="address2" id="" class="form-control" maxlength="55" value="" />
    </div>
  </div>

当我在上面使用 Firefox 响应式设计模式检查宽度小于 768 时,第二个标签“地址 2:”被换行,但它在左侧显示了一些边距。当我使用 firebug 检查检查时,我没有发现任何问题。

编辑:实际上,对于大屏幕,我希望在同一行上有 2 个以上的标签和输入,但对于 768 像素以下的屏幕,我希望将其分解为 2 行。

最佳答案

我添加了 col-xs-12 做标签和 'text-center' 类,以便更好地定位在 small 上,但这取决于你。

<div class="form-group row">  
  <label for="address1" class="col-xs-12 col-md-1 control-label text-center">Address 1:</label>
  <div class="col-xs-10 col-md-4">
    <input type="text" name="address1" id="" class="form-control" maxlength="55" value="" />
  </div>
  <label for="address2" class="col-xs-12 col-md-1 control-label text-center">Address 2:</label>
    <div class="col-xs-10 col-md-4">
      <input type="text" name="address2" id="" class="form-control" maxlength="55" value="" />
   </div>
</div>

关于css - Bootstrap 3.3.6 小屏幕上的响应式表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39492287/

相关文章:

html - 在 HTML5 中,<form> 元素是像 <section> 一样的分段元素吗?

python - SelectField 返回值 wtf-forms

css - 动态获取鼠标点击事件的顶部和左侧

jquery - 我怎样才能使用 bootstrap 制作一个跨越它下面其他行的列?

css - 为什么 margin 不为 td 保留?

html - 来自 wordpress 的 CSS 没有改变

php - 使用 PHP 和 MySQL 内容的随机网格布局

css - 如何应用 css "font"属性值,如标题|图标|菜单...等

javascript - 在 jQuery.extend() 中使用 $(this)

html - 如何在边框上添加一个元素并让它在调整窗口大小时保持位置?