"Bootstrap" col-md-offset-* pas de travail

J'essaie d'ajouter de Bootstrap décalage de classe dans mon code pour obtenir diagonale de l'alignement comme ceci:

Mais je ne sais pas ce décalage ne doit-je utiliser. J'ai essayé quelques compensations pour atteindre cet objectif, mais pas de l'utiliser.Le texte est couvrant l'ensemble de la jumbotron.Voici mon code

Html:

<div class="jumbotron">
        <div class="container">
            <div class="row">
                <div>
                    <h2 class="col-md-4 col-md-offset-4">Browse.</h2>
                    <h2 class="col-md-4 col-md-offset-4">create.</h2>
                    <h2 class="col-md-4 col-md-offset-4">share.</h2>
                </div>
            </div>
        </div>
    </div>

CSS:

.jumbotron {
    height: 500px;
    width: 100%;
    background-image: url(img/bg.jpg);
    background-size: cover;
    background-position: center;
}

.jumbotron h2 {
    color: white;
    font-size: 60px;
}

.jumbotron h2:first-child {
    margin: 120px 0 0;
}

Merci de me guider.Je vous remercie à l'avance.

Ne devrait pas vos corrections être plus comme 2-4-6 au lieu de 4-4-4?
Ajouter du texte et des lignes de rupture dans un div "text-align: right'
Pour moi, la 4.0.0-bêta ne fonctionne pas pour les décalages mais alors 4.0.0-bêta.2 a fait un travail. Peut-être il y avait un bug là (ah, comme par stackoverflow.com/a/46503532/8479). Notez que le décalage des classes de bootstrap v4 ressembler offset-md-4 plutôt que col-md-offset-4.
On dirait que vous voulez être aligné à droite. À l'aide d'offset vous êtes toujours à la merci d'affichage du navigateur et de zoom. Ne serait-il pas plus sage de placer simplement un div conteneur et de l'aligner à droite les trois lignes?

InformationsquelleAutor Aisha Salman | 2016-07-13

20

Je ne recommanderais pas en utilisant le système de Grille dans ce cas, autant que de simplement ajouter une augmentation de rembourrage pour chaque <h2>. Cela étant dit, la façon de réaliser cela à l'aide de col-*-offset-* serait comme suit:
```
<div class="jumbotron">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h2>One</h2>
            </div>

            <div class="col-md-11 col-md-offset-1">
                <h2>Two</h2>
            </div>

            <div class="col-md-10 col-md-offset-2">
                <h2>Three</h2>
            </div>
        </div>
    </div>
</div>
```
Essentiellement la première ligne doit couvrir la totalité de la ligne (donc, -12). La deuxième ligne doit être compensée par 1 colonne, de sorte que vous contrebalancée par 1 et lui donner une largeur totale de 11 colonnes (11+1 = 12) et ainsi de suite. Votre décalage est toujours assez pour s'assurer que le total de la colonne count est égal à 12.
- L'a obtenu. Merci beaucoup 🙂 @RobertC
InformationsquelleAutor Robert
145

Il fonctionne dans le bootstrap 4, il y avait quelques changements dans la documentation.Nous n'avons pas besoin de préfixe col, juste offset-md-3 par exemple
```
<div class="row">
   <div class="offset-md-3 col-md-6"> Some content...
   </div>
</div>
```
Ici doc.
- ohh putain de merde vous saveed mes heures
- Est-ce encore au travail? À l'époque, je n'arrive pas à faire le décalage avec et sans col-*
- hey, il est difficile de répondre à votre question, ajouter un peu de code ou de l'extrait de code avec votre problème.
- Cela a résolu mon problème qui je travaillais depuis quelques heures. J'étais prêt à ne pas utiliser le thème. Merci!!!
- Je vous remercie. J'ai essayé de nombreuses façons, et seulement le vôtre fonctionne.
- enfin, merci
InformationsquelleAutor Vasyl Gutnyk
18

Changer col-md-offset-* à offset-md-* a fonctionné pour moi

InformationsquelleAutor sriram26
4

Dans le bootstrap 3 le format est
```
col-md-6 col-md-offset-3
```
Pour la même grille de Bootstrap 4 le format est
```
col-md-6 offset-md-3
```
- Merci pour cette réponse! Vu et compris que j'étais avec bootstrap 3 et il m'a aidé à obtenir le décalage que je voulais.
InformationsquelleAutor Maravarman Manoharan
2

cochez cette bootply

cela est faux parce que bootstrap avec une marge à gauche:**%
```
.jumbotron h2:first-child {
   margin: 120px 0 0;
}
```
- OK merci 🙂 @CemArguvanli
InformationsquelleAutor Cem Arguvanlı

Devrait être :

<h2 class="col-md-4 col-md-offset-1">Browse.</h2>
<h2 class="col-md-4 col-md-offset-2">create.</h2>
<h2 class="col-md-4 col-md-offset-3">share.</h2>

Corrigé. Mais toujours pas de travail! De toute façon, je vous remercie! @MrGeek

InformationsquelleAutor MrGeek

Où est le problème

Dans votre code HTML tous h2s ont le même hors-jeu de 4 colonnes, de sorte qu'ils ne font pas d'diagonale.

Comment résoudre le problème

Un row a 12 colonnes, de sorte que nous devrions mettre tous les h2 dans son propre row.
Vous devriez avoir quelque chose comme ceci:

<div class="jumbotron">
    <div class="container">
        <div class="row">
                <h2 class="col-md-4 col-md-offset-1">Browse.</h2>
        </div>
        <div class="row">
                <h2 class="col-md-4 col-md-offset-2">create.</h2>
        </div>
        <div class="row">
                <h2 class="col-md-4 col-md-offset-3">share.</h2>
        </div>
    </div>
</div>

Une alternative est de faire de chaque h2 largeur de plus de décalage somme de 12 colonnes, de sorte que chacun adapte automatiquement dans une nouvelle ligne.

<div class="jumbotron">
    <div class="container">
        <div class="row">
                <h2 class="col-md-11 col-md-offset-1">Browse.</h2>
                <h2 class="col-md-10 col-md-offset-2">create.</h2>
                <h2 class="col-md-9 col-md-offset-3">share.</h2>
        </div>
    </div>
</div>

J'ai édité ma réponse, car j'ai réalisé que j'avais mal interprété la question. Désolé.
Hey! il n'est pas encore working.By la façon merci 🙂 @DanieleBarresi
Vous avez raison. Édité pour le fixer. Maintenant, il fonctionne. Je tiens à souligner que cela ne fait qu'une diagonale sur des écrans plus grands que 992px, qui est le md taille. Si vous en avez besoin pour chaque taille de l'écran, remplacez md avec xs.

InformationsquelleAutor Daniele Barresi

1

Bootstrap offset 4 classes ont été supprimées dans la version Beta 1, mais sera rétabli dans la version Bêta 2 -
rubrique de référence

InformationsquelleAutor user947668
1

Pour le moment, Si vous souhaitez déplacer une colonne de plus de seulement 4 unités de colonne par exemple, je suggère d'utiliser un mannequin espace réservé comme dans mon exemple ci-dessous
```
<div class="row">
      <div class="col-md-4">Offset 4 column</div>
      <div class="col-md-8">
            //content
      </div>
</div>
```
InformationsquelleAutor lionelsanou

Si vous êtes ok avec petit tweak -
nous savons que bootstrap fonctionne avec une largeur de 12

<div class="row">
      <div class="col-md-1">
            Keep it blank it becomes left offset
      </div> 
      <div class="col-md-5">
      </div>
      <div class="col-md-5">
      </div>
      <div class="col-md-1">
            Keep it blank it becomes right offset
      </div
</div>

Je suis sûr qu'il ya une meilleure façon de le faire, mais j'étais pressé donc utilisé cette astuce

InformationsquelleAutor Karthik Sagar

0

Veuillez utiliser offset-md-4 au lieu de col-md-offset-4 dans le bootstrap 4. C'est peu de changements adoptés dans le bootstrap 4.

Pour plus d'info

InformationsquelleAutor Anand Raja

Vous devez vous connecter pour publier un commentaire.