web-dev-qa-db-fra.com

Conteneur BootStrap 3 dans le conteneur

Vous trouverez ci-dessous la mise en page sur laquelle je travaille en utilisant BootStrap3. J'ai un exemple d'installation avec une mise en page limitée pour cette question à http://jsfiddle.net/s7Rwj/4

WebSite Layout

J'ai du mal à configurer ma tête. J'utilise une largeur de conteneur fluide de sorte que la largeur de mon en-tête est de 100%. Toutefois, la question est que, sur trois éléments à l'intérieur de l'en-tête, un doit rester à gauche et que le reste des deux doit correspondre aux côtés gauche et droit respectivement du "conteneur" ci-dessous.

Jusqu'à présent, j'ai essayé différentes configurations, mais ci-dessous est le seul qui soit proche de ce que je recherche.

    <header class="container-fluid navbar-fixed-top">
        <div class="row">
            <div class="col-xs-12" style="background-color:aliceblue">                    
                <div class="container">
                    <div class="row">
                        <div class="col-xs-6" style="background-color:Violet">2</div>
                        <div class="col-xs-6 pull-right" style="background-color: lightblue">3</div>
                    </div>
                </div>
                <span style="position:absolute;top:0;left:0">
                    A quick brown fox jumps over the lazy dog.
                </span>
            </div>
        </div>
    </header>

Cependant, le problème avec cette disposition est que, puisque la plage utilise la position absolue lorsque le navigateur est redimensionné, le texte chevauche le deuxième élément de l’en-tête. J'ai déjà essayé de lui fournir une largeur explicite, mais cela n'a pas aidé.

Si je n'utilise pas la position absolue, l'étendue et le reste des éléments sont rendus sur deux lignes différentes.

Je cherche des conseils sur la façon de configurer cet en-tête. 

PS: J'ai ajouté des couleurs de fond aléatoires à div tag pour comprendre où elles sont rendues. N'hésitez pas à les ignorer. 

htmlcsstwitter-bootstrap-3
33
ndd

Je pense que vous recherchez des difficultés là où elles ne le sont pas.

Vous devez éviter les conteneurs de nidification (.container et .container-fluid) car ils ne peuvent pas être imbriqués en raison de leur remplissage, etc. ... regardez la présentation de Bootstrap 3 Containers

De même, lorsque vous imbriquez des colonnes, tout ce que vous avez à faire est de placer une nouvelle ligne dans l'une de vos colonnes et d'y insérer les colonnes imbriquées. Voir le système de grille Bootstrap 3 - colonnes d'imbrication , voici leur exemple:

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

La solution que vous recherchez avec votre mise en page est très simple. Vous n'avez pas nécessairement besoin de fluide contenant dans l'en-tête. Créez simplement un conteneur pour la partie centrale au-dessus du carrousel et enveloppez-le dans un .wrap ou toute autre classe que vous pouvez styler avec width: 100%. De plus, vous pouvez ajouter un peu de rembourrage dans le conteneur. 

<header class="wrap navbar-fixed-top">
    <div class="container">
        <div class="row">
            <div class="col-xs-6" style="background-color: Violet;">2</div>
            <div class="col-xs-6 pull-right" style="background-color: lightblue;">3</div>
        </div>
        <span style="position:absolute;top:0;left:0">
            A quick brown fox jumps over the lazy dog.
        </span>
    </div>
</header>

Et quelque part dans votre CSS (je recommande style.less), vous pouvez styler .wrap à une largeur de 100%, bien qu'il s'agisse d'une largeur par défaut pour chaque div sans styles. 

.wrap {
    width: 100%;
}

Je sais que cette question est un peu plus ancienne mais peu importe. J'espère que j'ai bien compris votre question.

50
TeeJay

En fait, je ne vois aucun problème à utiliser le conteneur Bootstrap imbriqué dans le conteneur-fluid. Je l'ai fait récemment dans un thème que j'ai construit et qui utilise un constructeur de pages. Cela permettait au client de créer facilement des pages avec différentes rangées de largeur fixe et pleine à l'aide du générateur de page.

Ajoutez simplement quelque chose comme ceci à votre feuille de style:

.container-fluid .container {
    padding-left:0;
    padding-right:0;
}

Cela dit, je pense que ce que vous essayez peut être résolu en ajoutant un peu de remplissage à la première colonne du conteneur. Pour le rendre spécifique à un mobile, ajoutez ce remplissage dans une requête multimédia au point d'arrêt où le texte commence à se chevaucher. Ce n’est pas la meilleure façon de le faire, mais c’est la façon dont je l’aborderais étant donné ce que vous essayez d’accomplir.

<header class="container-fluid navbar-fixed-top">
    <div class="row">
        <div class="col-xs-12" style="background-color:aliceblue; padding-top:30px;">
            <div class="container">
                <div class="row">
                    <div class="col-xs-6" style="background-color:Violet">2</div>
                    <div class="col-xs-6" style="background-color: lightblue">3</div>
                </div>
            </div> 
            <span style="position:absolute;top:0;left:0">
                        Some text
            </span>
        </div>
    </div>
</header>

LIEN: http://jsfiddle.net/udLbLwh6/

16
Opaw Nako

Je crois que la nidification des conteneurs est parfaitement bien. Tant que vous supprimez le remplissage du conteneur. À l'intérieur de .container-fluid (.container-fluid .container {padding: 0;}), quoi d'autre ne va pas?

0
user3614058