web-dev-qa-db-fra.com

bootstrap 3 image pleine largeur et div dans le conteneur

J'essaie de définir certaines divsions sur width: 100% sur Twitter Bootstrap 3 (sans marges ni marges).

JSfiddle: http://jsfiddle.net/rq9ycjcx/

HTML:

<div class="container">
    <header>
        <div class="row">
            <div class="col-md-2">
                <img src="http://placehold.it/150x50">
            </div>
            <div class="col-md-10">Menu</div>
        </div>
        <div class="row gray">
            <div class="col-md-6">
            <h1>Page Title</h1>
            </div>
            <div class="col-md-6">
                <div class="breadcrumbs">Main page > page </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
            <img src="http://placehold.it/350x150" />
            </div>    
        </div>    
    </header>

    <footer>
    <div class="row">
        <div class="col-md-12">Content</div>
    </div>
    <div class="row dark">
        <div class="col-md-3">Footer 1</div>
        <div class="col-md-3">Footer 2</div>
        <div class="col-md-3">Footer 3</div>
        <div class="col-md-3">Footer 4</div>
    </div>
    </footer>    
</div>

  1. Quelle est la bonne façon d'obtenir une image http://placehold.it/350x150width: 100%, sans marges ni marges?

  2. Le titre de la page et le fil d'Ariane hauteur est 80px.
    Si je redimensionne la fenêtre sur un écran plus petit (par exemple, mobile), le texte Main page > page disparaît (il se trouve quelque part mais pas sur sa propre ligne). Comment le réparer?

css3twitter-bootstraptwitter-bootstrap-3
4
Lari13

Comme suggéré ci-dessus, vous pouvez créer une classe d'assistance

.padding-0 {
    padding: 0;
}

et l'appliquer à tous les éléments HTML pour lesquels vous avez besoin d'une réinitialisation du remplissage. Donc dans votre cas, cela ressemblerait à ceci:

<div class="row">
    <div class="col-md-12 padding-0">
        <img src="http://placehold.it/350x150" />
    </div>    
</div>

Pour le deuxième problème, définissez height of .gray class sur auto:

@media () {
    .gray {
        height: auto;
    }
}

Remarque: Vous pouvez également supprimer line-height: 80px, c'est facultatif :)

http://jsfiddle.net/rq9ycjcx/8/

8
Davion

Utilisez <div class="container-fluid">. Selon la documentation de Bootstrap: Utilisez .container-fluid pour un conteneur de largeur totale couvrant toute la largeur de la fenêtre d'affichage.  

Il y a 0 remplissage sur container-fluid.

Dans votre code, vous avez ce qui semble être du contenu body dans votre header et vous avez également un div class="container" en dehors de vos header et footer. Ce n'est pas correct, vous devriez avoir votre container/container-fluid à l'intérieur de votre corps. Également pour votre en-tête, vous devriez utiliser <nav="nav navbar-nav">.

Mise à jour Fiddle

9
Dan

Il n’ya pas de "bonne" façon de faire cela dans Bootstrap 3. Cela signifie que vous devez réinitialiser le remplissage pour la colonne exacte.
Vous pouvez créer une classe comme celle-ci:

.col-md-12.resetPadding { padding:0px }

À propos de la disparition de Main page > page, je ne vois pas ce problème sur mes navigateurs (testé sur Chrome et FF), mais vous avez line-height: 80px ici et comme vous l'avez dit, votre div de chapelure a height: 80px;, essayez donc de réduire la propriété line-height et voyez comment cela fonctionne.

1
Kamil

Un moyen simple serait de supprimer le <div class="col-md-12">...</div> et d'ajouter votre contenu directement dans la balise row. La balise de rangée supprime les gouttières gauche et droite, tandis que le cold-md-12 ajoute les gouttières dans le fond.

La documentation de Bootstrap 3 indique que pour les éléments simples de pleine largeur, vous n'avez besoin d'aucun balisage, par exemple, enveloppez-le simplement dans des balises <p>. Cependant, cela montrera les gouttières de 15 pixels en raison du balisage de la page. Donc, en ajoutant simplement la balise row et en plaçant votre contenu directement à l'intérieur de celle-ci, vous obtiendrez un contenu d'une largeur de 100% et serez conforme à la documentation BS3.

0
Phill Healey