web-dev-qa-db-fra.com

Bootstrap col-md-offset- * ne fonctionne pas

J'essaie d'ajouter la classe d'offset Bootstrap dans mon code pour obtenir un alignement diagonal comme ceci:

 Image

Mais je ne sais pas quel offset dois-je utiliser. J'ai essayé quelques compensations pour y parvenir mais aucune utilisation. Le texte couvre tout le 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. Merci d'avance.

htmlcsstwitter-bootstrap
26
Aisha Salman

Je ne recommanderais pas d'utiliser le système de grille dans ce cas, mais simplement d'ajouter un remplissage accru pour chaque <h2>. Ceci étant dit, la manière dont vous réaliseriez ceci en utilisant col-*-offset-* serait la suivante:

<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 toute la ligne (so -12). La deuxième ligne doit être décalée de 1 colonne. Vous devez donc compenser de 1 et lui donner une largeur totale de 11 colonnes (11 + 1 = 12), etc. Votre décalage est toujours suffisant pour vous assurer que le nombre total de colonnes est égal à 12.

18
Robert

Cela fonctionne dans bootstrap 4, il y a eu quelques changements dans la documentation. Nous n'avons pas besoin du préfixe col-, seulement offset-md-3 par exemple.

<div class="row">
   <div class="offset-md-3 col-md-6"> Some content...
   </div>
</div>

Ici doc .

115
Vasyl Gutnyk

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

15
sriram26

vérifier ceci bootply

c'est faux parce que bootstrap utilisant margin-left: **%

.jumbotron h2:first-child {
   margin: 120px 0 0;
}
2
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>
1
Mr Geek

Où est le problème

Dans votre code HTML, tous les h2s ont le même décalage de 4 colonnes, ils ne feront donc pas de diagonale.

Comment le réparer

Une row a 12 colonnes, nous devrions donc mettre chaque h2 dans sa 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 consiste à insérer chaque colonne h2 largeur plus somme compensée en 12 colonnes, de sorte que chacune d'entre elles soit automatiquement renvoyée à 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>
1
Daniele Barresi

Les classes de décalage Bootstrap 4 ont été supprimées dans la version bêta 1, mais seront restaurées dans la version bêta 2 - référence de rubrique

1
user947668

Pour l'instant, si vous souhaitez déplacer une colonne sur 4 unités de colonne, par exemple, je vous suggérerais d'utiliser uniquement un espace réservé factice, comme dans l'exemple ci-dessous.

<div class="row">
      <div class="col-md-4">Offset 4 column</div>
      <div class="col-md-8">
            //content
      </div>
</div>
1
lionelsanou

Si vous êtes d'accord avec le petit Tweak - .__, nous savons que le 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 y a un meilleur moyen de faire cela, mais j'étais pressé alors utilisé cette astuce

0
Karthik Sagar

Dans bootstrap 3 le format est 

col-md-6 col-md-offset-3

Pour la même grille dans Bootstrap 4, le format est 

col-md-6 offset-md-3
0
Maravarman Manoharan