Comment pourrais-je ajouter rembourrage span contenu à l'aide de css (pas de JS) dans le bootstrap?

J'ai un bootstrap site, où j'ai défini une image de fond pour le CORPS, taille=couverture; qui fonctionne très bien dans presque tous les navigateurs modernes.

Puis j'ai défini une structure comme ceci:

<div class="row">
    <div class="span12">
        <div class="span1">&nbsp;</div>
        <div class="span5">CONTACT_FORM_CONTENT</div>
        <div class="span5">MAP_ETC_CONTENT</div>
        <div class="span1">&nbsp;</div>
    </div>
</div>

Maintenant, quelques photos pour voir à quoi il ressemble:

Lors de l'affichage dans le navigateur de bureau

Lors de l'affichage de smartphone

Le problème

Lors de l'affichage du site dans le navigateur de bureau, tout est ok. Chaque "< span1 >" à gauche/droite servent de rembourrage à gauche/droite correctement, mais lors de la visualisation avec le smartphone, ces "< span1 >" sont transformés et placé en haut/bas de mon contenu et le remplissage à gauche/droite disparaît.

Quelqu'un a une idée comment résoudre ce problème sans l'aide de JS? Je tiens à corriger l'ensemble du site, avec juste un peu de css changements.

Grâce

coderwall.com/p/ercabq Vérifier ce lien

OriginalL'auteur Enrique | 2013-04-05

8

Vous pouvez accomplir ceci en remplissant le Contenu d'un Formulaire comme ceci:

CSS:
```
.padded { padding: 10px; }
```
HTML:
```
<div class="row">
    <div class="span12">
        <div class="span1">&nbsp;</div>
        <div class="span5">
            <div class="padded">
                 CONTACT_FORM_CONTENT
            </div>
        </div>
        <div class="span5">MAP_ETC_CONTENT</div>
        <div class="span1">&nbsp;</div>
    </div>
</div>
```
Hi Hai. Votre solution est l'idéal, mais je voulais éviter de changer de 50+ code de fichiers. J'ai pensé que peut-être par modding certains de bootstrap.le code css tout pourrait changer automatiquement
Dans ce cas, vous pouvez remplacer la span5 de classe, mais cela allait changer tous les span5 - pas sûr que ce soit bon. Par exemple: .span5 { width: 450px; padding: 0 10px; }

OriginalL'auteur Hai Nguyen
0

Envelopper votre div.ligne dans une div.le conteneur. Pas de CSS nécessaires. Maintenant, quand vous allez mobile et il s'effondre la div vide, l' .classe de conteneur sera de maintenir le rembourrage autour de votre div. C'est idéal, car il se débarrasse de l'excès d'espace pour profiter de l'espace à l'écran, mais maintient rembourrage.

Aussi, il n'y a pas besoin de la div.span1 avec un contenu vide. Au lieu de cela, les supprimer et ajouter un .offset1 à votre première div.span5.

Aussi, lors de l'imbrication de balise span dans une autre plage, vous avez besoin de l'enfermer dans une autre div.ligne. Mais dans ce cas, nous pouvons baisse de la div.span12 entièrement, puisque la rangée intérieure ajoute jusqu'à 12 ("Bootstrap" est "de gauche" alignés, de sorte que vous n'avez pas à implicitement remplir l'espace vers la droite, et comptent pour le total de 12 cellules).

Et si vous voulez un span12 en bas de la page, il suffit d'ajouter un autre div.ligne en-dessous, suivie d'une div.span12. Ils ont seulement besoin d'être contenu dans la div.le conteneur. Le Style de la div.conteneur à ajouter votre couleur d'arrière-plan.

Si vous souhaitez régler le rembourrage sur la div.conteneur, vous allez vraiment vouloir modifier le Bootstrap MOINS de fichiers, ce qui est une autre boule de cire et la courbe d'apprentissage. Réglage de rembourrage directement jette un tas d'autres mesures de détraqué, et vous seriez obligé de régler un tas de trucs pour compenser. Mais je pense que vous allez trouver le défaut d'un rembourrage approprié.
```
<div class="container" style="background-color:white;">
    <div class="row">
        <div class="span5 offset1">CONTACT_FORM_CONTENT</div>
        <div class="span5">MAP_ETC_CONTENT</div>
    </div>
</div>
```
OriginalL'auteur Gabriel Hansen

Vous devez vous connecter pour publier un commentaire.