Controles desalineados y <hr/> desaparecido

[crujikoki]

Hola,

Estoy atascado con esto desde hace días... Lo que quiero es que el label y el anchor (<a></a>) estén alineados (creo que verticalmente) yque se muestre el divisor <hr/>.

Código HTML:

<div class="container">
    <div class="row form-group">
        <div class="col-sm-4">
            <h4><label class="control-label col-sm-6" for="Element_Type">Element Type</label></h4>
            <div class="col-sm-6">
                <a class="btn btn-default" href="/Controller/Method" role="button">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> New Type
                </a>
            </div>
            <hr />
        </div>
    </div>
</div> 

Muchas gracias de antemano!
Saludos.

[Pantera80]

Buenas!!!

Creo que esto es lo que estás buscando:

Código HTML:

<div class="container">
                <div class="row form-group">
                    <div class="col-sm-4">
                            <h4><label class="control-label col-sm-6 " for="Element_Type">Element Type</label></h4>
                    </div>
                        <div class="col-sm-6">
                            <a class="btn btn-default " href="/Controller/Method" role="button">
                                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> New Type
                            </a>
                        </div>
                            
                    
                
                </div>
            <hr/>
        </div>
 

He metido a la misma altura los divs de la label y del anchor.
La etiqueta <hr/> la he puesto justo después de los dos

Un saludo

[crujikoki]

Hola,

Gracias por tu respuesta, pero eso no es lo que quiero. El tema de la alineación ya lo he resuelto añadiendo un <div> al label como también has hecho tú. Pero el <hr/> quiero que esté dentro del <div class="col-sm-4">. El ejemplo completo seria este:

Código HTML:

<div class="container">
    <div class="row form-group">
        <div class="col-sm-4">
            <h4><label class="control-label col-sm-6" for="Element_Type">Element Type</label></h4>
            <div class="col-sm-6">
                <a class="btn btn-default" href="/Controller/Method" role="button">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> New Type
                </a>
            </div>
            <hr/>
        </div>
        <div class="col-sm-4">
            <h4><label class="control-label col-sm-6" for="Element_Type">Element Type</label></h4>
            <div class="col-sm-6">
                <a class="btn btn-default" href="/Controller/Method" role="button">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> New Type
                </a>
            </div>
            <hr/>
        </div>
        <div class="col-sm-4">
            <h4><label class="control-label col-sm-6" for="Element_Type">Element Type</label></h4>
            <div class="col-sm-6">
                <a class="btn btn-default" href="/Controller/Method" role="button">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> New Type
                </a>
            </div>
            <hr />
        </div>
    </div>
</div> 

Lo que quiero es que haya una división <hr/> cada 4 casillas del grid de Bootstrap.

[Pantera80]

Hola de nuevo!!!

A base de investigar, creo que ya lo he conseguido.

Lo primero que he hecho es encerrar el <hr/> dentro de un div y le pongo la clase "row", sino no sale:

Código HTML:

<div class="col-sm-4">
                            <h4><label class="control-label col-sm-6" for="Element_Type">Element Type</label></h4>
                            <div class="col-sm-6">
                                <a class="btn btn-default" href="/Controller/Method" role="button">
                                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> New Type
                                </a>
                            </div>
                    
                            <div class='row'>                       
                                <hr/>
                            </div>
                                
                    
                    </div>
 

Después, hay que modificar el CSS que viene por defecto en el Bootstrap, para ello en tu hoja de estilos escribe este código para que sobreescriba al original:

Código CSS:

hr{ 
    color: black; 
    height: 1px; 
    background-color:black;
}
 

Espero que te sirva, sino dímelo

Un saludo

[crujikoki]

Hola,

La verdad que no me ha funcionado. Lo he solucionado usando el margen superior de una tabla que quiero poder debajo como si fuera el divisor. Así que por ahora ya no lo necesito.

De todas formas, si alguien encuentra la solución que la publique para otra alma en pena que le suceda lo mismo.

Saludos.