自举4 - 与最大的列表标签宽度

-1

我建立一个形式在全宽度流体布局2列，标签列和输入列。自举4 - 与最大的列表标签宽度

问题是因为它与宽屏流体布局的COL-2标签太大而COL-1太小。

有没有办法给出一个最大宽度山坳形式的标签栏或我需要为此列上创建索姆自定义CSS？

简单的演示：https://codepen.io/seltix/pen/aWgVjR

<div class="formcontainer"> 

    <div class="form-group row"> 
    <label class="col-12 col-lg-2 col-form-label">Label</label> 
    <div class="col-12 col-lg-10"> 
     <input class="form-control" type="text" value=""> 
    </div> 
    </div> 

    <div class="form-group row"> 
    <label class="col-12 col-lg-2 col-form-label">Longer label</label> 
    <div class="col-12 col-lg-10"> 
     <input class="form-control" type="text" value=""> 
    </div> 
    </div> 

    <div class="form-group row"> 
    <label class="col-12 col-lg-2 col-form-label">Longer label (extra)</label> 
    <div class="col-12 col-lg-10"> 
     <input class="form-control" type="text" value=""> 
    </div> 
    </div> 

</div>

引导4格式的源：https://v4-alpha.getbootstrap.com/components/forms/#textual-inputs

的感谢！

来源

2017-05-30 Seltix

引导程序4中的col-lg-2的最大宽度为16.6667%，屏幕大小边界为min-width: 992px。你想要做的是使用你的自定义类这样的覆盖在该视图的列的最大宽度：

CSS

/* Not too wide */ 
    @media(min-width: 992px) { 
     .col-percent-13 { 
      max-width: 13% !important; 
     } 
    } 

/* A little bit narrower */ 
    @media(min-width: 992px) { 
      .col-percent-11 { 
       max-width: 11% !important; 
      } 
     }

例HTML

<!-- I want all the labels in this form to have a width of 13% --> 
    <div class="form-group row"> 
    <label class="col-12 col-lg-2 col-form-label col-percent-13">Label</label> 
    <div class="col-12 col-lg-10"> 
     <input class="form-control" type="text" value=""> 
    </div>

<!-- In another form, I want all the labels to be 11% wide --> 
    <div class="form-group row"> 
    <label class="col-12 col-lg-2 col-form-label col-percent-11">Label</label> 
    <div class="col-12 col-lg-10"> 
     <input class="form-control" type="text" value=""> 
    </div>

修改宽度值和类名到您的偏好。

来源

2017-05-30 12:33:07

嗨，泰为RHE答复。因此，使用此选项，我需要创建另一个列，因为我需要更改下一列的最大宽度。 – Seltix

您有多个表格吗？因此，根据您的需求定义您自己的宽度并将其应用于表单。我已经更新了我的答案以展示示例。 –

嗨。我确实有不止一个表格，但我没有谈论这个，我想说的是，由于表格有2列，如果我自定义第一列（col-form-label col-lg-2）不同的宽度我也需要自定义第二列（col-lg-10）。最后，我需要生成新的col-lg-X类，以便以这种形式应用。 :) – Seltix

自举4 - 与最大的列表标签宽度

回答

相关问题