引导模式中水平形式的输入字段溢出超出界限

Question

简单的水平表单，当显示大小较大时，输入表单字段溢出超出界限。当你缩小显示器时，它似乎又回到了界限。我如何确保它保持在范围内？

此外，我似乎无法让标签和字段并排排列。

看看我的小提琴http://jsfiddle.net/5bkncazz/

<button type="button" id="btn-request-endorsement" class="btn btn-default" aria-hidden="true" data-toggle="modal" data-target="#modal-request-endorsement">Request Endorsement</button>
  <div id="modal-request-endorsement" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <h4 class="modal-title">Send an email requesting endorsement</h4>
  </div>
  <div class="modal-body form-horizontal">
    <div id="endorsement-form-container" class="container">
      <form class="form-horizontal" role="form">
        <div class="form-group">
          <label for="email">Email:</label>
          <input type="email" class="form-control" id="email" placeholder="Enter email of endorser" />
          <label for="msg">Message:</label>
          <input type="text" class="form-control" id="msg" placeholder="Enter a personalized message" />
        </div>
        <button type="submit" class="btn btn-default">Send Email</button>
      </form>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->

Answer 1

这段CSS似乎是导致字段突破模态界限的原因：

@media (min-width: 768px)
.container {
    width: 750px;
}

这会影响div id="endorsement-form-container" class="container"元素。你能用你自己的width:inherit风格或类似的东西来覆盖它吗？

标签和字段对齐

这是由引导程序中默认具有display:block;的表单控件引起的。您可以通过用div包围标签和字段来覆盖它，div将充当每个表单字段的容器。然后添加以下CSS来覆盖行为。这里的标签还添加了一个设置宽度，以使内容看起来一致：

label {
  width:70px;
}
.form-control {
  display:inline-block;
  width:80%;
}

以JSFiddle为例：http://jsfiddle.net/5bkncazz/8/

Answer 2

从模态主体类部分中删除容器类为我解决了这个问题。