Question

我正在尝试使用Bootstrap制作响应式表单。使用col - ** - *这样的类是否正确：

<div class="row">
    <input class="col-*-blabla" ... ... >
    <input class="col-*-blabla" ... ... >
</div>

或者我应该将它们嵌入到具有col类的div中，如下所示：

<div class="row">
   <div class="col-*-*">
     <input .. ... >
   </div>
   <div class="col-*-*">
     <input .. ... >
  </div>
</div>

谢谢。

Answer 1

你应该嵌套它们。 Bootstrap文档中有一个示例显示在标签元素（Horizontal forms）上使用col-类。

看看这个例子，红色块是col-xs-12内部默认row类的div，正如您在此容器下面看到的那样，当您在输入元素上使用col-类时，它们将会未对齐（这是因为它将填充应用于输入元素本身）。

.div {
  height: 200px;
  background: red;
}
.row {
  margin-bottom: 20px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  
  <div class="row">
    
    <div class="col-md-12">
      <div class="div"></div>
    </div>
    
  </div>
  
  <div class="row">
    <input type="text" class="col-xs-4">
    <input type="text" class="col-xs-4">
  </div>
  
  <div class="row">
    <div class="col-xs-4">
      <input type="text">
    </div>
    <div class="col-xs-4">
      <input type="text">
    </div>
    
</div>

将Bootstraps的col - * - *类放在输入元素上是否可以？

1 个答案: