2
votes

Pourquoi ma ligne Bootstrap ajoute-t-elle un remplissage à mon élément?

J'essaie le système de colonnes bootstrap et j'essaie de centrer un texte mais cela ne fonctionnera pas car il a un rembourrage qui vient peut-être de la classe de ligne bootstrap voici mon code

 <section className="home-main-content row" style={{paddingRight:'0px', marginRight:0}}>
            <div className="text-a-img row col-12">
                <div className="ti-title col-12 mt-4 text-center row">
                    <h1>Fast response</h1>
                </div>
                <div className="ti-img col-12"></div>
                <div className="ti-text-col-12"></div>
            </div>
            <div className="text-a-img row col-12">
                <div className="ti-title col-12 mt-4 text-center row">
                    <h1>Fast response</h1>
                </div>
                <div className="ti-img col-12"></div>
                <div className="ti-text-col-12"></div>
            </div>
            <div className="text-a-img row col-12">
                <div className="ti-title col-12 mt-4 text-center row">
                    <h1>Fast response</h1>
                </div>
                <div className="ti-img col-12"></div>
                <div className="ti-text-col-12"></div>
            </div>
        </section>

ces noms de classes personnalisés n'ont rien fait car mon css est toujours vide, il ressemblait à ceci en action

la seule façon de me débarrasser de ce remplissage est de supprimer la classe de row et je ne veux pas faire cela. J'ai essayé la classe personnalisée de styles en ligne, etc., comment puis-je me débarrasser de ce remplissage?

html css bootstrap-4 twitter-bootstrap

0 commentaires

3 Réponses :

-1
votes

Avez-vous essayé d'écrire "text-align: center" en css

1 commentaires

Ensuite, vous pouvez écrire dans le css ou vous pouvez écrire "row {padding: 0}" peut-être que ce sera bien pour vous si vous écrivez en css

1
votes

Logiquement, ce n'est pas la voie à suivre avec les grilles bootstrap. Le premier problème que je peux voir ici est que vous utilisez directement une row intérieur d'une row . Idéalement, le row doit être immédiatement suivi d'un col . et si vous souhaitez introduire de nouvelles lignes / colonnes de grille, vous devez le faire dans cette colonne. Donc ce serait quelque chose comme ça:

<Container>
    <Row>
        <Col md={12}>
        </Col>
    </Row>
</Container>

et dans votre cas:

<section className="home-main-content row" style={{paddingRight:'0px', marginRight:0}}> 
    <div className="text-a-img col-12">
        <div className="row">
            <div className="ti-title col-12 mt-4 text-center row">
                <h1>Fast response</h1>
            </div>
            <div className="ti-img col-12"></div>
            <div className="ti-text-col-12"></div>
        </div>
    </div>
</section>

Aussi quelques autres choses à considérer: enveloppez toujours votre grille de lignes / cols avec la classe de conteneur, container ou container-fluid .

De plus, envisagez de définir vos propres valeurs de marge et de remplissage pour les lignes et les colonnes, car bootstrap a également des valeurs par défaut pour les classes de lignes et de colonnes. Veuillez donc les considérer également.

Et vous utilisez clairement react.js, donc je vous suggère d'opter pour REACTSTRAP . c'est un wrapper bootstrap pour react. vous aurez un code beaucoup plus propre à utiliser. c'est aussi simple que ça:

<div class="row">
    <div class="col-12">
        <div class="row">
          <div class="col-6">
          </div>
          <div class="col-6">
          </div>
        </div>
    </div>
</div>

0 commentaires

0
votes

Comme je l'ai mentionné, les lignes immédiatement imbriquées ne sont pas standard. Les styles que vous avez affichés concernent les éléments enfants de lignes et liés aux gouttières. Ainsi, en imbriquant les lignes comme vous l'avez fait, les styles sont appliqués à l'élément intérieur.

Supprimez la classe de ligne externe ou placez une colonne entre les lignes, par implémentation standard.

0 commentaires