bootstrap 3 toute la largeur de l'image et de la div conteneur

Je suis en train de régler quelques divs à width: 100% sur Twitter Bootstrap 3 (y compris aucun des remplissages ou des 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 de l'image http://placehold.it/350x150 width: 100%, y compris l'absence des remplissages ou des marges?
  2. Titre de la Page et de la chapelure hauteur est 80px.
    Si je redimensionner la fenêtre à l'écran plus petit (par exemple mobile), texte Main page > page disparaît (c'est quelque part, mais pas sur une ligne).
    Comment résoudre ce problème?

OriginalL'auteur Lari13 | 2014-08-17

  1. 8

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

    .padding-0 {
    padding: 0;
}

    et de l'appliquer à tous les éléments HTML pour laquelle vous avez besoin d'un rembourrage de réinitialisation. Donc dans votre cas, il devrait ressembler à 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 de .gray classe de auto :

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

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

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

    Deuxième problème n'est pas résolu 🙁 j'ai besoin que page title et breadcrumbs pile à la verticale, un par un si petit écran. Mais je ne sais pas comment traiter avec height sur grand écran. Dois-je utiliser media queries pour supprimer height sur les petits écrans?
    J'ai modifié mes plus, désolé j'ai mal compris, pensé que vous voulez l'un à côté de l'autre.

    OriginalL'auteur Davion

  2. 9

    Utilisation <div class="container-fluid">. Comme par Bootstrap Docs: Utilisation .conteneur de fluide pour un toute la largeur du conteneur, couvrant la totalité de la largeur de votre fenêtre.

    Il y a 0 de rembourrage sur container-fluid.

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

    Mis À Jour Le Violon

    Vous êtes simplement en mélangeant tout. Le demandeur tente de la taille d'une image dans une colonne, il n'y a rien à traiter avec la taille du récipient. Concernant la balise d'en-tête, se référant à w3schools : - Le <header> élément spécifie un en-tête d'un document ou de la section. - Le <header> élément doit être utilisé comme un conteneur pour la présentation du contenu. - Vous pouvez avoir plusieurs <header> éléments dans un document.

    OriginalL'auteur Dan

  3. 1

    Il n'y a pas de "bonne" façon de faire que dans le Bootstrap 3. Cela signifie que vous devez réinitialiser le rembourrage de la colonne exacte.

    Vous pouvez créer une classe comme celle-ci:

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

    Sur Main page > page en train de disparaître, je ne vois pas ce problème sur mes navigateurs (testé sur Chrome et FF), mais vous avez line-height: 80px là et comme vous l'avez dit votre chapelure div a height: 80px;, alors essayez de réduire line-height de la propriété et de voir comment il fonctionne.

    Je pense qu'il l'habitude de travailler jusqu'à ce que u le faire .col-md-12.resetPadding { padding:0px !important }
    Non, bootstrap ne l'utilisez pas !important. De sorte que vous pouvez la remplacer facilement à l'aide de {padding:0px}.
    il y a une "bonne" façon de faire, c'est en utilisant container-fluid au lieu de container
    container-fluid a encore des remplissages il besoin de le réinitialiser.

    OriginalL'auteur Kamil

  4. 0

    Un moyen simple serait de supprimer la <div class="col-md-12">...</div> et ajoutez votre contenu directement à l'intérieur de l'étiquette de ligne. L'étiquette de ligne supprime la gauche & droit des gouttières, alors que le froid-md-12 essentiellement ajoute les gouttières en retour.

    Le Bootstrap 3 documentation dit que pour une seule largeur articles que vous n'avez pas besoin de n'importe quelle balise, par exemple, vient l'envelopper dans <p> balises. Toutefois, cela permettra de montrer 15px gouttières en raison du marquage de page. Ainsi, par simple ajout dans le row balise et de placer votre contenu directement à l'intérieur de cela, vous obtiendrez 100% de la largeur du contenu et être en conformité avec la BS3 de la documentation.

    OriginalL'auteur Phill Healey