web-dev-qa-db-fra.com

Bootstrap 3 Diviseur Horizontal et Vertical

J'ai du mal à mettre des lignes horizontales et verticales sur mon site Web. Pas sûr de ce qui ne va pas avec ça.

J'ai essayé d'utiliser les frontières mais je ne sais pas si je le fais bien.

Je voudrais réaliser une division croisée juste comme l'image ci-dessous:

enter image description here

Voici à quoi ressemble mon code:

<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>
htmlcsstwitter-bootstrap-3
36
user3233755

Devez-vous utiliser Bootstrap pour cela? Voici un exemple HTML/CSS basique pour obtenir ce look qui n’utilise aucun 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;
}

Voici le travail Fiddle .

METTRE À JOUR

Si vous devez utiliser Bootstrap, voici un exemple semi-réactif qui produit le même effet, bien que vous puissiez avoir besoin d'écrire quelques requêtes de média supplémentaires.

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;
}

Voici un autre travail Fiddle .

Remarque:

Notez que vous pouvez également utiliser l'élément <hr> pour insérer un séparateur horizontal dans Bootstrap si vous le souhaitez.

37
ElliotSchmelliot

Le <hr> doit être placé dans un <div> pour un fonctionnement correct.

Placez-le comme ceci pour obtenir la largeur désirée ` 

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

`

J'espère que cela aidera un futur lecteur!

12
neophyte

Ajoutez les lignes droites de cette façon et les bordures horizontales en utilisant HR ou border-bottom ou .col-right-line: after . N'oubliez pas les requêtes des médias pour vous débarrasser des lignes sur les petits appareils.

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

Je sais que c'est un "ancien" article. Cette question et les réponses fournies m'ont aidée à trouver des idées pour mon propre problème. Je pense que cette solution répond à la question OP (intersection des frontières avec 4 et 2 colonnes selon l'affichage)} _

Fiddle:https://jsfiddle.net/tqmfpwhv/1/

css Sur la base des informations OP, la requête multimédia à la fin est destinée à la vue médicale.

.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 ajustements du code fourni par OP. Bordure rouge et liens Img par exemple.

<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>
7
s-gc

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

Maintenant, nous pouvons utiliser la classe vr partout où nous avons besoin d’un type d’apparence vertical-divider.

J'espère que ça aide!

0
Wolverine

J'ai fait le petit mix SCSS suivant pour construire pour tous les points d'arrêt de bootstrap ...

Je reçois .col-xs-divider-left ou col-lg-divider-right etc. 

Remarque: ceci utilise la syntaxe de bootstrap v4-alpha ...

@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;
            }
        }
    }
}
0
mogga