Bootstrap 3：使用input-group / input-group-addon和水平标签设置自定义宽度 [英] Bootstrap 3: Set custom width with input-group/input-group-addon and horizontal labels

问题描述

我想使用 .col-lg - * 类来控制输入元素的大小。

解决方案

请尝试将标签和 .input-group 与 .form-group 容器分组。

 < div class =form-group> 
< label for =class =control-label> Paycheck< / label> 
< div class =input-group input-group-lg> 
< span class =input-group-addon> $< / span> 
< input type =textclass =form-controlid => 
< / div> 
< / div> 
  

此处演示 - http://jsfiddle.net/jfXUr/1/

I would like to control the size of my input elements using the class .col-lg-* outlined here on the bootstrap website. However, putting the <span> element inside of a div completely messes it up:

HTML with div:

<div class="input-group input-group-lg">
  <label for="" class="control-label">Paycheck</label>
  <div class="col-lg-10">
    <span class="input-group-addon">$</span> 
    <input type="text" class="form-control" id="">
  </div>
</div>

How can I set the width of the input elements so that they are all the same?

I want the left margin of each input element to be flush like so:

This is what it looks like now:

This is my current HTML:

    <div class="col-md-6">
        <div class="content">
            <h2>Income</h2>
        <form class="form-income form-horizontal" role="form">

            <div class="input-group input-group-lg">
            <label for="" class="control-label">Paycheck</label>
                <span class="input-group-addon">$</span> 
                <input type="text" class="form-control" id="">
            </div>

            <div class="input-group input-group-lg">
            <label for="" class="control-label">Investments</label>
                <span class="input-group-addon">$</span>
                <input type="text" class="form-control" id=""> 
            </div>

            <div class="input-group input-group-lg">
            <label for="" class="control-label">Other</label>
                <span class="input-group-addon">$</span> 
                <input type="text" class="form-control" id="">
            </div>

            <button class="btn btn-lg btn-primary btn-block" type="submit">Update</button>
        </form>

        </div>

LIVE EXAMPLE: http://jsfiddle.net/jfXUr/

解决方案

As per my comment above, try grouping the label and .input-group together with a .form-group container.

<div class="form-group">
    <label for="" class="control-label">Paycheck</label>
    <div class="input-group input-group-lg">
        <span class="input-group-addon">$</span> 
        <input type="text" class="form-control" id="">
    </div>
</div>

Demo here - http://jsfiddle.net/jfXUr/1/

这篇关于Bootstrap 3：使用input-group / input-group-addon和水平标签设置自定义宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！