twitter-bootstrap - danger - popover bootstrap

espacio de grupo de forma bootstrap

Question

Me gustaría tener algún espacio entre los controles. De acuerdo con las especificaciones, se debe lograr utilizando la clase de grupo de formularios. Sin embargo no funciona en mi caso.

http://jsfiddle.net/TLF4L/

<div class="col-xs-12 col-sm-12">
    <form role="form">
        <div class="form-group">
            <div class="col-xs-3 text-right">
            <label for="cpTitle">Title</label>
            </div>
            <div class="col-xs-9">
                <input type="text" class="form-control" placeholder="Title of the program" id="cpTitle" />
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-3 text-right">
            <label for="cpDesc">Description</label>
            </div>
            <div class="col-xs-9">
                <textarea class="form-control" rows="3" placeholder="Description of the program" id="cpDesc"></textarea>
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-3 text-right">
                <label for="cpAddr">Program address</label>
            </div>
            <div class="col-xs-9">
                <input type="text" class="form-control" placeholder="Name of Facility" id="cpAddr" />
                <input type="text" class="form-control" placeholder="Street 1" />
                <input type="text" class="form-control" placeholder="Street 2" />
                <div class="col-xs-4">
                    <input type="text" class="form-control" placeholder="State" />
                </div>
                <div class="col-xs-4">
                    <input type="text" class="form-control" placeholder="City" />
                </div>
                <div class="col-xs-4">
                    <input type="text" class="form-control" placeholder="Zip" />
                </div>
            </div>
        </div>
    </form>
</div>

Answer 1

Actualicé tu violín, también agregué una clase de textarea. fiddle actualizado

Necesita usar CSS para establecer un margen inferior a sus campos de entrada

input[type=text], .txtarea{
margin-bottom: 10px;

 }

Answer 2

http://jsfiddle.net/TLF4L/6/

El principal problema es asegurarse de establecer la clase "formulario-horizontal" en su formulario. Para los campos de dirección del programa, puede establecer una fila separada para cada uno o lo que sugiero es simplemente agregar un css para el margen inferior en cada campo de entrada. Editado jsfiddle arriba

.margin-bottom {
margin-bottom:15px;}



<div class="col-xs-12 col-sm-12">
<form role="form" class=''form-horizontal''>
    <div class="form-group">
        <div class="col-xs-3 text-right">
            <label for="cpTitle">Title</label>
        </div>
        <div class="col-xs-9">
            <input type="text" class="form-control" placeholder="Title of the program" id="cpTitle" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-3 text-right">
            <label for="cpDesc">Description</label>
        </div>
        <div class="col-xs-9">
            <textarea class="form-control" rows="3" placeholder="Description of the program" id="cpDesc"></textarea>
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-3 text-right">
            <label for="cpAddr">Program address</label>
        </div>
        <div class="col-xs-9">
            <input type="text" class="form-control margin-bottom" placeholder="Name of Facility" id="cpAddr" />
            <input type="text" class="form-control margin-bottom" placeholder="Street 1" />
            <input type="text" class="form-control margin-bottom" placeholder="Street 2" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-3 text-right">&nbsp;</div>
        <div class="col-xs-3">
            <input type="text" class="form-control" placeholder="State" />
        </div>
        <div class="col-xs-3">
            <input type="text" class="form-control" placeholder="City" />
        </div>
        <div class="col-xs-3">
            <input type="text" class="form-control" placeholder="Zip" />
        </div>
    </div>
</form>