Question

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

另外，我似乎无法将标签和字段排列在一起。

<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作为每个表单字段的容器来包围标签和字段来覆盖它。然后添加以下CSS以覆盖行为。此处还会在标签中添加设置宽度，以使事物看起来一致：

label {
  width:70px;
}

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

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

Answer 2

从modal-body类部分中删除容器类为我解决了这个问题。

bootstrap模式中水平形式的输入字段溢出超出范围

2 个答案:

标签和字段对齐