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>

问题是当窗口被重新调整为宽度时，窗体不会填充体宽，当所有div都堆叠时。

有什么建议吗？

Answer 1

问题出在您的float: right媒体资源中。该列具有50％的宽度并向右浮动，导致它“无法正确调整大小”。它高于768px，但低于768px，引导程序的“移动优先”原则采取行动，所有列都变为auto-width。宽度超过768像素，宽度为50％（您的col-sm-6），但低于它会全部折叠导致丑陋的显示。

您想要一个媒体查询，使其在768px以下看起来很好：

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 */
    }
}

Answer 2

试试这个，

<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>

完全堆叠时，窗体不会在引导程序中正确调整大小

2 个答案: