Question

我正在尝试为一个简单的表单创建一个输入表，其中每个输入都有一个标签。为了使表单居中，我使用了col-md-6 col-md-offset-3。

我的问题是所有输入的大小都不一样。以下是生成的jsfiddle和我的代码：

 <div class="container">
       <div class="row">
       <div class="col-md-6 col-md-offset-3">
         <form role="form">
         <table class="table table-condensed">
         <tr>
         <td>
          <label for="lab1">Longueur 1</label>
          <input type="text" class="form-control" id="lab1" />
         </td>
         <td>
          <label for="lab2">Longueur 2</label>
          <input type="text" class="form-control" id="lab2" />
         </td>
         <td>
          <label for="lab3">Longueur 3</label>
          <input type="text" class="form-control" is="lab3" />
     </td>
         <td>
          <label for="lab4">Masse 1</label>
          <input type="text" class="form-control" id="lab4" />
         </td>
         <td>
          <label for="lab5">Masse 2</label>
          <input type="text" class="form-control" id="lab5" />
         </td>
         <td>
          <label for="lab6">Masse 3</label>
          <input type="text" class="form-control" is="lab6" />
     </td>
         </tr>
     <tr>
         <td>
          <label for="lab7">Angle 1</label>
          <input type="text" class="form-control" id="lab7" />
         </td>
         <td>
          <label for="lab8">Angle 2</label>
          <input type="text" class="form-control" id="lab8" />
         </td>
         <td>
          <label for="lab9">Angle 3</label>
          <input type="text" class="form-control" is="lab9" />
     </td>
     <td>
          <label for="lab7">Vitesse 1</label>
          <input type="text" class="form-control" id="lab7" />
         </td>
         <td>
          <label for="lab8">Vitesse 2</label>
          <input type="text" class="form-control" id="lab8" />
         </td>
         <td>
          <label for="lab9">Vitesse 3</label>
          <input type="text" class="form-control" is="lab9" />
     </td>
         </tr>
       </table>
         </form>
         </div>
         </div>
         </div>

如您所见，对于这两行，右侧的三个“输入”小于左侧的三个“输入”。

我如何解决此问题并为12输入设置相同的大小？

Answer 1

你应该考虑完全抛弃桌面并使用引导程序来布置列 - 当你在移动设备上考虑这一点时，它会让事情变得更容易。

正如bardo正确地说的那样，由于标签的长度不同而长短不一样。一种选择是在小型设备上每行仅显示3个元素，然后在达到768px（iPad屏幕大小）时切换到6。为此，您需要为每个元素使用此代码：

...
  <div class="col-xs-4 col-sm-2">
    <label for="lab1">Longueur 1</label>
    <input type="text" class="form-control" id="lab1" value="12345678" />
  </div>
...

当然，您可能会发现对于一个小型（即移动）屏幕来说仍然是不够的，所以甚至可能更好的是每行显示一个元素，直到达到768px：

...
  <div class="col-sm-2">
    <label for="lab1">Longueur 1</label>
    <input type="text" class="form-control" id="lab1" value="12345678" />
  </div>
...

这是一个小提琴：http://jsfiddle.net/vwx6gnx4/8/你会在小屏幕上看到你有4行3个元素，这意味着所有标签都有空间显示。

Answer 2

这是由于标签长度，如果你试图改变一个，你会看到相应的表调整，就像一个表应该是可读的。

尝试使用Bootstrap网格，创建两个label并将每个input + .col-xs-2括在{{1}}中。这将确保您获得六个均匀间隔的字段。

bootstrap - 相同大小的输入到表单

2 个答案: