Css Twitter bootstrap 3在一行上形成水平和多个输入列_Css_Twitter Bootstrap 3

Css Twitter bootstrap 3在一行上形成水平和多个输入列

css twitter-bootstrap-3

Css Twitter bootstrap 3在一行上形成水平和多个输入列,css,twitter-bootstrap-3,Css,Twitter Bootstrap 3,我需要在单行中放置多列输入，如下所示：我通过将多个输入分组到单个表单组中来实现这一点，但这样我就不能使用has error类 <div class="form-group"> <label class="control-label col-sm-4">Quarter</label> <input type="text" class="col-sm-20" /> </div> <div class="form

我需要在单行中放置多列输入，如下所示：

我通过将多个输入分组到单个

表单组中来实现这一点，但这样我就不能使用has error
类
<div class="form-group">
     <label class="control-label col-sm-4">Quarter</label>
     <input type="text" class="col-sm-20" />
</div>
<div class="form-group">
     <label class="control-label col-sm-4">Address</label>
     <input type="text" class="col-sm-15" />
     <label class="control-label col-sm-2">Addr. №</label>
     <input type="text" class="col-sm-3" />
</div>
<div class="form-group">
     <label class="control-label col-sm-4">Block name/Number</label>
     <input type="text" class="col-sm-5" />
     <label class="control-label col-sm-2">Entrance</label>
     <input type="text" class="col-sm-3" />
     <label class="control-label col-sm-2">Floor</label>
     <input type="text" class="col-sm-3" />
     <label class="control-label col-sm-2">Apartament</label>
     <input type="text" class="col-sm-3" />
</div>


一刻钟
地址
地址。№
区块名称/编号
入口
地板
公寓

因此，是否可以为每个输入框设置多个表单组
？
要在bootstrap 3中轻松对齐内容，您应该使用。

以下是一个与您的需求密切相关的示例：
<body>
<form class="form-horizontal">
    <div class="row">
       <div class="form-group">
        <label class="col-sm-2">Quarter</label>
        <div class="col-sm-10"><input type="text" class="form-control" /></div>
        </div>
   </div>
    <div class="row">
        <div class="form-group">
        <label class="col-sm-2">Address</label>
        <div class="col-sm-5"><input type="text" class="form-control" /></div>
        </div>
        <div class="form-group">
        <label class="col-sm-2">Addr. №</label>
        <div class="col-sm-3"><input type="text" class="form-control" /></div>
        </div>
    </div>
    <div class="row">
         <div class="form-group">
        <label class="col-sm-2">Block name/Number</label>
        <div class="col-sm-1"><input type="text" class="form-control" /></div>
        </div>
        <div class="form-group">
        <label class="col-sm-1">Entrance</label>
        <div class="col-sm-1"><input type="text" class="form-control" /></div>
         </div>
         <div class="form-group">
        <label class="col-sm-1">Floor</label>
        <div class="col-sm-1"><input type="text" class="form-control" /></div>
         </div>
         <div class="form-group">
        <label class="col-sm-2">Apartament</label>
        <div class="col-sm-3"><input type="text" class="form-control" /></div>
        </div>
    </div>
</form>
</body>


一刻钟
地址
地址。№
区块名称/编号
入口
地板
公寓

对齐方式取决于屏幕的宽度，因此请确保根据您的需要对其进行适当调整。然后您可以自己设置输入的样式。
您需要将输入封装在自己的col-*
类中，如下所示
  <form class="form-horizontal">
      <div class="form-group">
          <label class="control-label col-sm-2">Quarter</label>
          <div class="col-md-10">
           <input type="text" class="form-control">
          </div>
      </div>
      <div class="form-group">
          <label class="control-label col-sm-2">Address</label>
          <div class="col-md-8">
           <input type="text" class="form-control">
          </div>
          <label class="control-label col-sm-1">Addr. №</label>
          <div class="col-md-1">
           <input type="text" class="form-control">
          </div>
      </div>
      <div class="form-group">
          <label class="control-label col-sm-2">Block name/Number</label>
          <div class="col-md-4">
           <input type="text" class="form-control">
          </div>
          <label class="control-label col-sm-1">Entrance</label>
          <div class="col-md-1">
           <input type="text" class="form-control">
          </div>
          <label class="control-label col-sm-1">Floor</label>
          <div class="col-md-1">
           <input type="text" class="form-control">
          </div>
          <label class="control-label col-sm-1">Apartment</label>
          <div class="col-md-1">
           <input type="text" class="form-control">
          </div>
      </div>
  </form>


一刻钟
地址
地址。№
区块名称/编号
入口
地板
公寓


此外，引导中没有col-sm-15
或col-sm-20
，我看不到
和
在哪里。我想保留表单组
元素，以便轻松绑定验证。你知道你可以玩弄我的小提琴，不是吗？我已经为你修改过了。更好吗？你的fiddle不包括表单组
元素。只需将.row替换为.form组，文档清楚地表明：对于表单水平，它们都以相同的方式工作引导中没有col-sm-20，它使用一个12格的系统来划分屏幕，这样你就可以提供col-sm-1到col-sm-12之间的值。如果你使用SASS/LESS或者在bootstrap的下载页面上使用设置，你可以选择任意数量的列。当然可以。我假设OP使用的是标准引导构建。在本例中，不可能在一行中仅将一个字段标记为错误。或者我错过了什么。