Estoy teniendo problemas para poner en las líneas horizontales y verticales en mi sitio web. No estoy seguro de lo que está mal con esto.

He intentado utilizar fronteras, pero no estoy seguro de si estoy haciendo lo correcto.

Me gustaría lograr una cruz de criss divisores como la imagen de abajo:

Bootstrap 3 Horizontal y Vertical Divisor

Aquí es lo que mi código es:

<div class="container-liquid" style="margin:0px; padding: 0px">
    <div class="row">
        <div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan" id="one"><h5>Rich Media Ad Production</h5><img src="images/richmedia.png"></div>
        <div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan" id="two"><h5>Web Design & Development</h5> <img src="images/web.png" ></div>               
        <div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan" id="three"><h5>Mobile Apps Development</h5> <img src="images/mobile.png"></div>
        <div class="col-xs-6 col-sm-6 col-md-3 text-center rightspan" id="four"><h5>Creative Design</h5> <img src="images/mobile.png"> </div>
        <div class="col-xs-12"><hr></div>
        <div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan" id="five"><h5>Web Analytics</h5> <img src="images/analytics.png"></div>
        <div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan" id="six"><h5>Search Engine Marketing</h5> <img src="images/searchengine.png"></div>
        <div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan" id="seven"><h5>Mobile Apps Development</h5> <img src="images/socialmedia.png"></div>
        <div class="col-xs-6 col-sm-6 col-md-3 text-center rightspan" id="eight"><h5>Quality Assurance</h5> <img src="images/qa.png"></div>

        <hr>
    </div>
</div>
  • Hizo escribir su propio css para esto? Y si es así podemos ver?
  • Estoy seguro de que este post es antiguo, pero usted debe nos han dado una captura de pantalla de cómo su implementación actual se ve tan bien como el html, el css y lista de frameworks como bootstrap se han utilizado. Acaba de decir….
InformationsquelleAutor user3233755 | 2014-01-24

7 Comentarios

  1. 37

    ¿Tiene usted el uso de Bootstrap para esto? He aquí un básico de HTML/CSS ejemplo para la obtención de este look que no utiliza ningún tipo de Bootstrap:

    HTML:

    <div class="bottom">
        <div class="box-content right">Rich Media Ad Production</div>
        <div class="box-content right">Web Design & Development</div>
        <div class="box-content right">Mobile Apps Development</div>
        <div class="box-content">Creative Design</div>
    </div>
    <div>
        <div class="box-content right">Web Analytics</div>
        <div class="box-content right">Search Engine Marketing</div>
        <div class="box-content right">Social Media</div>
        <div class="box-content">Quality Assurance</div>
    </div>

    CSS:

    .box-content {
        display: inline-block;
        width: 200px;
        padding: 10px;
    }
    
    .bottom {
        border-bottom: 1px solid #ccc;
    }
    
    .right {
        border-right: 1px solid #ccc;
    }

    Aquí es el trabajo de Violín.


    ACTUALIZACIÓN

    Si usted debe usar Bootstrap, aquí es un semi-sensible ejemplo que consigue el mismo efecto, aunque puede que necesite escribir un par adicional de consultas de medios de comunicación.

    HTML:

    <div class="row">
        <div class="col-xs-3">Rich Media Ad Production</div>
        <div class="col-xs-3">Web Design & Development</div>
        <div class="col-xs-3">Mobile Apps Development</div>
        <div class="col-xs-3">Creative Design</div>
    </div>
    <div class="row">
        <div class="col-xs-3">Web Analytics</div>
        <div class="col-xs-3">Search Engine Marketing</div>
        <div class="col-xs-3">Social Media</div>
        <div class="col-xs-3">Quality Assurance</div>
    </div>

    CSS:

    .row:not(:last-child) {
        border-bottom: 1px solid #ccc;
    }
    
    .col-xs-3:not(:last-child) {
        border-right: 1px solid #ccc;
    }

    Aquí es otro trabajo de Violín.

    Nota:

    Tenga en cuenta que también puede utilizar el <hr> elemento para insertar un divisor horizontal en Bootstrap así si quieres.

    • El uso de col-xs-6-como las clases de Bootstrap 3 le da el poder de líquido / la responsable de diseño, que se adapta al dispositivo real de las dimensiones de la pantalla. Esto es bastante limpio en Bootstrap 3 (y todos los demás, que implementa una lógica similar). Su «simple» de código, mientras que las obras, parece que no tienen esta característica.
    • He añadido un básico Bootstrap ejemplo.
    • Una alternativa a .row:not(:last-child) { border-bottom: ... es .row + .row { border-top: ... – en esencia, que pone un límite superior en todas las filas excepto la primera. He visto que el método en el Bootstrap código fuente.
  2. 12

    La <hr> debe ser colocado dentro de un <div> para el correcto funcionamiento.

    Lugar como este para obtener el ancho deseado
    `

    <div class='row'>
            <div class='col-lg-8 col-lg-offset-2'>
            <hr>
           </div>
           </div>

    `

    Espero que esto ayude un futuro lector!

    • Gracias, ¿qué acerca de las líneas verticales?
  3. 7

    Añadir el derecho de las líneas de esta manera y la horizontal de las fronteras uso de los recursos humanos o frontera-parte inferior o .col-a la derecha de la línea:después de. No olvides las consultas de medios para deshacerse de las líneas en dispositivos pequeños.

    .col-right-line:before {
      position: absolute;
      content: " ";
      top: 0;
      right: 0;
      height: 100%;
      width: 1px;
      background-color: @color-neutral;
    }
  4. 7

    Sé que este es un «mayores» de correos. Esta pregunta y las respuestas me ayudaron a obtener ideas para mi propio problema. Creo que esta solución se aborda el OP pregunta (intersección de las fronteras con 4 y 2 columnas dependiendo de la pantalla)

    Violín:
    https://jsfiddle.net/tqmfpwhv/1/


    css base en OP de información, consulta de medios de comunicación al final es para med & lg vista.

    .vr-all {
        padding:0px;
        border-right:1px solid #CC0000;
    }
    .vr-xs {
        padding:0px;
    }
    .vr-md {
        padding:0px;
    }
    .hrspacing { padding:0px; }
    .hrcolor {
        border-color: #CC0000;
        border-style: solid;
        border-bottom: 1px;
        margin:0px;
        padding:0px;
    }
    /* for medium and up */
    @media(min-width:992px){
        .vr-xs {
            border-right:1px solid #CC0000;
        }
        }

    html ajustes OP código proporcionado. Borde rojo y enlaces Img por ejemplo.

    <div class="container">
    <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-3 text-center vr-all" id="one">
    <h5>Rich Media Ad Production</h5>
    <img src="http://png-1.findicons.com/files/icons/2338/reflection/128/mobile_phone.png" />
    </div>
    <div class="col-xs-6 col-sm-6 col-md-3 text-center vr-xs" id="two">
    <h5>Web Design & Development</h5>
    <img src="http://png-1.findicons.com/files/icons/2338/reflection/128/mobile_phone.png" >
    </div>
    <!-- hr for only x-small/small viewports -->
    <div class="col-xs-12 col-sm-12 hidden-md hidden-lg hrspacing"><hr class="hrcolor"></div>
    <div class="col-xs-6 col-sm-6 col-md-3 text-center vr-all" id="three">
    <h5>Mobile Apps Development</h5>
    <img src="http://png-1.findicons.com/files/icons/2338/reflection/128/mobile_phone.png" >
    </div>
    <div class="col-xs-6 col-sm-6 col-md-3 text-center vr-md" id="four">
    <h5>Creative Design</h5>
    <img src="http://png-1.findicons.com/files/icons/2338/reflection/128/mobile_phone.png" >
    </div>
    <!-- hr for for all viewports -->
    <div class="col-xs-12 hrspacing"><hr class="hrcolor"></div>
    <div class="col-xs-6 col-sm-6 col-md-3 text-center vr-all" id="five">
    <h5>Web Analytics</h5>
    <img src="http://png-1.findicons.com/files/icons/2338/reflection/128/mobile_phone.png" >
    </div>
    <div class="col-xs-6 col-sm-6 col-md-3 text-center vr-xs" id="six">
    <h5>Search Engine Marketing</h5>
    <img src="http://png-1.findicons.com/files/icons/2338/reflection/128/mobile_phone.png" >
    </div>
    <!-- hr for only x-small/small viewports -->
    <div class="col-xs-12 col-sm-12 hidden-md hidden-lg hrspacing"><hr class="hrcolor"></div>
    <div class="col-xs-6 col-sm-6 col-md-3 text-center vr-all" id="seven">
    <h5>Mobile Apps Development</h5>
    <img src="http://png-1.findicons.com/files/icons/2338/reflection/128/mobile_phone.png" >
    </div>
    <div class="col-xs-6 col-sm-6 col-md-3 text-center vr-md" id="eight">
    <h5>Quality Assurance</h5>
    <img src="http://png-1.findicons.com/files/icons/2338/reflection/128/mobile_phone.png" >
    </div>
    </div>
    </div>
  5. 0

    Me hizo la siguiente poco secs mixin para construir todos los archivos de inicio puntos de interrupción…

    Con él puedo obtener .col-xs-divider-left o col-lg-divider-right etc.

    Nota: este utiliza v4-alfa bootstrap sintaxis…

    @import 'variables';
    $divider-height: 100%;
    @mixin make-column-dividers($breakpoints: $grid-breakpoints) {
    //Common properties for all breakpoints
    %col-divider {
    position: absolute;
    content: " ";
    top: (100% - $divider-height)/2;
    height: $divider-height;
    width: $hr-border-width;
    background-color: $hr-border-color;
    }
    @each $breakpoint in map-keys($breakpoints) {
    .col-#{$breakpoint}-divider-right:before {
    @include media-breakpoint-up($breakpoint) {
    @extend %col-divider;
    right: 0;
    }
    }
    .col-#{$breakpoint}-divider-left:before {
    @include media-breakpoint-up($breakpoint) {
    @extend %col-divider;
    left: 0;
    }
    }
    }
    }
  6. 0

    CSS

    .vr {
    border-right: 1px solid #ccc !important;
    }

    HTML

    <div class="row">
    <div class="col-md-6 vr">
    <p>Column 1</p>
    </div>
    <div class="col-md-6">
    <p>Column 2</p>
    </div>
    </div

    Ahora, podemos usar la clase vr donde necesitamos tener un vertical divisor tipo de apariencia.

    Espero que ayude!

  7. 0

    Usted puede lograr esto mediante la adición de la frontera de la clase de bootstrap

    como la frontera de la izquierda ,usted puede usar border-left

    código de trabajo

    <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan border-right border-bottom" id="one"><h5>Rich Media Ad Production</h5><img src="images/richmedia.png"></div>
    <div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan border-right border-bottom" id="two"><h5>Web Design & Development</h5> <img src="images/web.png" ></div>               
    <div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan border-right border-bottom" id="three"><h5>Mobile Apps Development</h5> <img src="images/mobile.png"></div>
    <div class="col-xs-6 col-sm-6 col-md-3 text-center rightspan  border-bottom" id="four"><h5>Creative Design</h5> <img src="images/mobile.png"> </div>
    <div class="col-xs-12"><hr></div>
    <div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan border-right" id="five"><h5>Web Analytics</h5> <img src="images/analytics.png"></div>
    <div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan border-right" id="six"><h5>Search Engine Marketing</h5> <img src="images/searchengine.png"></div>
    <div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan border-right"  id="seven"><h5>Mobile Apps Development</h5> <img src="images/socialmedia.png"></div>
    <div class="col-xs-6 col-sm-6 col-md-3 text-center rightspan" id="eight"><h5>Quality Assurance</h5> <img src="images/qa.png"></div>
    <hr>
    </div>

    para obtener más refrence al bootstrap clases
    todas las clases ,la búsqueda de la frontera

Dejar respuesta

Please enter your comment!
Please enter your name here