bootstrap 完全堆叠时，表单无法正确调整大小

Question

这里的代码示例：http://jsfiddle.net/52VtD/9805/.

表格本身是：

<form id="contactform" method="post" class="form-horizontal" action="">
  <div class="form-group">
     <label class="control-label">Email</label>
       <input type="text" class="form-control" name="name" id="name" placeholder="Type in your email">
  </div>
</form>

问题是当 window 重新调整大小以缩小宽度时，当所有 div 堆叠时，表单不会填充正文宽度。

有什么建议吗？

Answer 1

试试这个，

<div class="col-sm-6 pull-right">/*remove class pull-right*/
             <h3>2</h3>

            <form id="contactform" method="post" class="form-horizontal" action="">
                <div class="form-group">
                    <label class="control-label">Email</label>
                    <input type="text" class="form-control" name="name" id="name" placeholder="Type in your email">
                </div>
            </form>
        </div>

Answer 2

问题出在您的 float: right 属性上。该列有 50% 的宽度并向右浮动，导致它 "doesn't resize properly"。在 768px 以上没问题，但在 768px 以下，bootstrap 的 "mobile first" 原则开始起作用，所有列都变成 auto-width。在 768px 宽度以上它有 50% 的宽度（你的col-sm-6）但在它下面全部折叠导致丑陋的显示。

您希望媒体查询使其在 768 像素以下看起来不错：

JSFiddle demo

我补充说：

HTML

col-sm-6 email-form 而不是 col-sm-6 pull-right.

CSS

.email-form {
    float: right; /* Floats right when width > 768px */
}

@media screen and (max-width: 768px) {
    .email-form {
        float: none; /* Doesn't float when width < 768px */
    }
}

bootstrap 完全堆叠时，表单无法正确调整大小

Form doesn't resize properly in bootstrap when fully stacked

html

css

twitter-bootstrap