web-dev-qa-db-fra.com

comment donner une bordure à bootstrap

J'utilise bootstrap tabs et cela fonctionne parfaitement. J'essaie de savoir s'il existe un moyen d'utiliser bootstrap pour donner une bordure à la le contenu des onglets qui est connecté à la bordure de la pilule donc ça ressemblera à une boîte. J'ai essayé de le faire avec mes propres CSS, mais il y a un plafond entre la bordure de la pilule et la bordure du contenu de l'onglet qui est une marge l'onglet la pilule doit avoir et ne peut pas être enlevée.Je veux qu'elle ressemble à l'image ci-dessous. tab content with border

twitter-bootstraptabs
62
user1404536

Le css suivant devrait faire exactement ce que vous cherchez :)

.tab-content {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    padding: 10px;
}

.nav-tabs {
    margin-bottom: 0;
}

margin-bottom: 0; sur . nav-tabs supprime l'écart entre les pilules et le contenu.

Le remplissage de . Tab-content rend le contenu non enfoncé contre le nouvelles frontières à gauche et à droite.

86
Kisuka

Je modifierais la réponse de Kisuka comme suit:

CSS

.tab-pane {

    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-radius: 0px 0px 5px 5px;
    padding: 10px;
}

.nav-tabs {
    margin-bottom: 0;
}

SCSS pour Bootstrap 4

.tab-pane {
    border-left: 1px solid $nav-tabs-border-color;
    border-right: 1px solid $nav-tabs-border-color;
    border-bottom: 1px solid $nav-tabs-border-color;
    border-radius: 0px 0px $nav-tabs-border-radius $nav-tabs-border-radius;
    padding: $spacer;
}

.nav-tabs {
    margin-bottom: 0;
}
57
user3749683

Étant plus DRY puis solution @goat, vous pouvez également réutiliser le css du panneau comme suit:

.tab-content.panel
{
    border-top: none; 
    border-top-left-radius: 0px; 
    border-top-right-radius: 0px;
}


<div>
    <ul class="nav nav-tabs">
        ...
    </ul>

    <div class="tab-content panel">
        <div class="tab-pane panel-body">
            ...
        </div>
    </div>
</div>

onglet contenu panneau panneau-défaut et onglet panneau-corps. Ensuite, vous n'avez pas besoin de redéfinir la bordure et le rembourrage. Il suffit de retirer la bordure supérieure et le rayon supérieur.

5
djmj

Avec le code suivant, tous les coins ont un rayon, mais les onglets sont décalés.

.nav-tabs {
    padding-left: 15px;
    margin-bottom: 0;
    border: none;
}
.tab-content {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
}

Attention: Si vous définissez la valeur 0px de remplissage de gauche de l'onglet de navigation, le premier onglet entre en conflit avec le rayon du contenu du haut à gauche.

5
amrocs

Cela a été demandé il y a longtemps, mais le truc ici pourrait aider certaines personnes:

Mettre dans un div.container votre .nav-tabs et .tab-content. Pour que div.container, donne une hauteur fixe dit 300px et border-bottom: 1px solid #ccc et overflow: hidden !important.

Puis au .tab-content, J'ajoute ce css: height: 100%; border-left: 1px solid #ccc ; border-right: 1px solid #ccc;

Et il fonctionne. Essayez-le ( http://jsfiddle.net/996Bw/ )

3
idris

J'ai modifié les réponses de @ user3749683 et @Kisuka afin que vous n'ayez pas à changer la définition des styles existants bootstrap. Au lieu de cela, vous ajoutez simplement une nouvelle classe à l'élément parent. I utilisé les premiers sélecteurs enfants afin que vous puissiez avoir des onglets imbriqués qui n'ont pas nécessairement besoin du contenu encadré.

.bordered-tab-contents > .tab-content > .tab-pane {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-radius: 0px 0px 5px 5px;
    padding: 10px;
}

.bordered-tab-contents > .nav-tabs {
    margin-bottom: 0;
}

structure de balisage

<div class="bordered-tab-contents">
    <ul class="nav nav-tabs">
        ...
    </ul>

    <div class="tab-content">
        <div class="tab-pane" ...>
            ...
        </div>
    </div>
</div>
2
goat