Css 引导窗体行宽度

我正在尝试构建一个如下所示的表单：

问题是，行比实际内容宽得多，所以容器被拉伸得太多

有人知道如何将行宽度减少到实际内容吗

<div class="container" style="border: 1px solid black">
  <h2>Vertical (basic) form</h2>
  <form class="">

    <div class="form-group row">
      <div class="col-sm-3">
        <input type="email" class="form-control" id="email" placeholder="Enter email">
      </div>
      <div class="col-sm-3">
        <input type="passord" class="form-control" id="pwd" placeholder="Enter password">
      </div>
    </div>

    <div class="form-group row">
      <div class="col-sm-6">
         <textarea class="form-control" cols="5" maxLength="500" />
      </div>
    </div>




  </form>
</div>

垂直（基本）形式

，当您使视口变宽时，

输入应保持其列大小，而不填充整个视口行

编辑：
.col
类将带有边框（如果您不希望边框像
.container
类那样占据所有12列），
.container
将始终占据整个12列网格

如下图所示，您使用的是6列（网格的一半），因此另一个6列元素可以位于它的右侧，这就是为什么如果您在
.container
上加边框，它将始终显示所有12列
宽度

我希望将两个输入放在一行中，我在第一篇文章中编辑了JSFIDLE，以便您更好地理解我的意思。我想用它来包围表单的“框”太宽了。这个解决方案对我来说很好，但是为什么文本区域中有html呢？
缺少一个结束标记
，我也会编辑它。应该是
基本上
是一个容器，而
不是。例如，
demo test
将是默认的显示文本。