两个输入相同的表格列采用所有单元格宽度 Bootstrap 3 [英] Two inputs same form column taking all the cell width Bootstrap 3

查看：17
本文介绍了两个输入相同的表格列采用所有单元格宽度 Bootstrap 3的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用 Bootstrap 3 并且我有点为网格的新类而苦苦挣扎.以前版本的 Bootstrap 允许您通过添加 span-* 类来设置输入的宽度，因此如果您想将两个输入放在同一表单列上，添加 span-2 和 span-10 就可以了.我正在尝试使用 bootstrap 3 来执行此操作，但得到的结果与您在此 fiddle，我想将选择和输入设置在同一列上.我想要输入顶部的标签，因此将 inline class 添加到表单不起作用.

我在这里缺少什么?

提前致谢和感谢

解决方案

http://jsbin.com/esewOyo/1/

大多数人无法相信涉及多少类，但表单控件始终是 100%，因此每个类都必须放在 col-- 类中，如果您想将元素放在同一个类中行，在这种情况下，您将使用带有列的嵌套行，如下所示:

<表单角色=表单"><div class="row my-row"><div class="col-sm-4"><div class="row"><div class="col-xs-6"><div class="form-group"><label>C-Band</label><select class="form-control"><选项值=C15+">C15+</option><选项值=C12-14">C12-14</option><选项></选择>

<div class="col-xs-6"><div class="form-group"><label>&nbsp;</label><输入类型=文本"class =表单控件">

<div class="col-sm-2"><div class="form-group"><label>C-Band</label><select class="form-control"><选项值=C15+">C15+</option><选项值=C12-14">C12-14</option><选项></选择>

<div class="col-sm-2"><div class="form-group"><label>C-Band</label><select class="form-control"><选项值=C15+">C15+</option><选项值=C12-14">C12-14</option><选项></选择>

<div class="col-sm-2"><div class="form-group"><label>C-Band</label><select class="form-control"><选项值=C15+">C15+</option><选项值=C12-14">C12-14</option><选项></选择>

<div class="col-sm-2"><div class="form-group"><label>C-Band</label><select class="form-control"><选项值=C15+">C15+</option><选项值=C12-14">C12-14</option><选项></选择>

</表单>

因为排水沟对我来说太宽了:

.row.my-row, .row.my-row .row {左边距:-1%；右边距:-1%}.row.my-row [class*=col-"] {填充左:1%；右填充:1%；}.row.my-row .row [class*=col-"] {填充左:1%；右填充:1%；}

I'm trying to get hands over Bootstrap 3 and I'm kindof struggling with the new classes for the grid. Previous versions of Bootstrap let you set the width of a input by adding the span-* class so if you wanted to put two inputs on the same form column, adding span-2 and span-10 did the job. I'm trying to do this with bootstrap 3 but I don't get the same result as you can see in this fiddle, I want to set the select and the input on the same col. I want the labels at top of the inputs so adding the inline class to the form don't work.

What I'm missing here?

Cheers and thanks in advance

解决方案

http://jsbin.com/esewOyo/1/

Most people can't believe how many classes are involved but form-control is always 100% so each one must go inside a col-- class and if you want to put elements on the same row, in this situation, then you'd use a nested row with columns as follows:

<div class="container">
 <form role="form">
  <div class="row my-row">
   <div class="col-sm-4">
    <div class="row">
     <div class="col-xs-6">
      <div class="form-group">
       <label>C-Band</label>
       <select class="form-control">
        <option value="C15+">C15+</option>
        <option value="C12-14">C12-14</option>
        <option>
       </select>
      </div>
     </div>
     <div class="col-xs-6">
      <div class="form-group">
       <label>&nbsp;</label>
       <input type="text" class="form-control">
      </div>
     </div>
    </div>
   </div>
   <div class="col-sm-2">
    <div class="form-group">
     <label>C-Band</label>
     <select class="form-control">
      <option value="C15+">C15+</option>
      <option value="C12-14">C12-14</option>
      <option>
     </select>
    </div>
   </div>
   <div class="col-sm-2">
    <div class="form-group">
     <label>C-Band</label>
     <select class="form-control">
      <option value="C15+">C15+</option>
      <option value="C12-14">C12-14</option>
      <option>
     </select>
    </div>
   </div>
   <div class="col-sm-2">
    <div class="form-group">
     <label>C-Band</label>
     <select class="form-control">
      <option value="C15+">C15+</option>
      <option value="C12-14">C12-14</option>
      <option>
     </select>
    </div>
   </div>
   <div class="col-sm-2">
    <div class="form-group">
     <label>C-Band</label>
     <select class="form-control">
      <option value="C15+">C15+</option>
      <option value="C12-14">C12-14</option>
      <option>
     </select>
    </div>
   </div>
  </div>
 </form>
</div>

Because the gutter is too wide for my taste:

.row.my-row, .row.my-row .row {
  margin-left:-1%;
  margin-right:-1%
}

.row.my-row [class*="col-"] {
 padding-left: 1%;
  padding-right: 1%; 
}

.row.my-row .row [class*="col-"] {
  padding-left: 1%;
  padding-right: 1%;
}

这篇关于两个输入相同的表格列采用所有单元格宽度 Bootstrap 3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆