Marge de largeur de demi-colonne à l'extérieur de la colonne dans Bootstrap

J'ai un div qui prend 12 colonnes Bootstrap. Comment puis-je ajouter la marge de la moitié d'une colonne sur la droite et la moitié d'une colonne sur la gauche?Marge de largeur de demi-colonne à l'extérieur de la colonne dans Bootstrap

Voici un point de départ.

html:

<div class="row"> 
    <div class="col-md-12 takes12Columns"> 
    DIV WHICH TAKES 12 COLUMNS 
    </div> 
</div>

css:

.takes12Columns 
{ 
    background: red; 
    text-align: center; 
}

https://jsfiddle.net/1gpna1h5/.

Source

2017-03-07 Anonymous

Je ne comprends pas. Le col-md-12 a déjà un remplissage sur les côtés gauche/droit de 15 px. Si vous voulez ajouter des marges, utilisez 'margin-left',' margin-right' – ZimSystem

@ZimSystem, désolé. J'ai fait une erreur. Je parlais de marge, pas de rembourrage. Si vous regardez le jsfiddle, vous pourrez obtenir ce que je veux. Je veux commencer div après la moitié de la colonne et la terminer avant la moitié de la colonne à la fin. –

@ZimSystem, où dois-je ajouter la marge? Pour la ligne ou pour le col-md-12? Je n'ai pas besoin de 15 px, mais exactement la moitié de la colonne. Il va changer dynamiquement sur le redimensionnement. –

Il n'y a pas moyen de le faire avec Bootstrap standard. Vous pouvez créer une construction personnalisée avec 24 colonnes, ou vous pouvez créer une classe de ligne personnalisée pour ajouter les marges équivalentes à 1/2 une unité de colonne de 8,33333%. Puis soustrayez la marge négative normale du row.

.row-custom { 
    margin-left: calc(4.166666% - 15px); 
    margin-right: calc(4.166666% - 15px); 
}

En outre, row doit toujours être placé à l'intérieur container.

http://www.codeply.com/go/QFy6hVUVDc

Source

2017-03-07 19:04:28 ZimSystem

Pourquoi la rangée devrait toujours être à l'intérieur du récipient? –

"Les lignes doivent être placées dans un .container (largeur fixe) ou .container-fluid (pleine largeur) pour un alignement et un rembourrage corrects." __ http://getbootstrap.com/css/#grid – ZimSystem

Merci pour l'attention. –

Si vous en utilisant bootstrap vous pouvez utiliser container-fluid simple ou container classe pour faire des changements sur le côté des colonnes en cas ci-dessus, vous pouvez utiliser margin-right ou margin-left s'il vous plaît voir

Js Fiddle

Source

2017-03-07 19:00:54

Merci beaucoup pour l'attention. Mais ce n'est pas ce dont j'ai besoin. Cela n'affecte pas la marge dynamiquement. Ci-dessus est la réponse appropriée. –

Marge de largeur de demi-colonne à l'extérieur de la colonne dans Bootstrap

Répondre

Questions connexes