html - 水平表单内的Bootstrap +表单组提供水平滚动条

我正在使用最新的 bootstrap 。

我有一个表单(class="form-horizontal")，在内部添加了一个带有“form-group”类的div，结果提供了一个水平滚动条。

我使用来自Bootstrap网站的相同代码在JSfiddle中创建了一个示例。
您可以在这里更好地看到它:
http://jsfiddle.net/SergioKastro/q4pq08rc/

如何停止显示水平滚动条？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
</form>

最佳答案

将您的代码放在<div class="container">或<div class="container-fluid">中。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <form class="form-horizontal">
    <div class="form-group">
      <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
      </div>
    </div>
  </form>
</div>

您体内的所有物体都应包含在<div class="container">或<div class="container-fluid">中。
"container"具有固定的宽度，具体取决于您的屏幕尺寸，而"container-fluid"随浏览器的宽度直接缩放。

关于html - 水平表单内的Bootstrap +表单组提供水平滚动条，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33631141/