web-dev-qa-db-fra.com

Les colonnes d'amorçage ne fonctionnent pas

Impossible de comprendre pourquoi les colonnes ne sont pas structurées avec ce code HTML:

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="col-md-4">  
                <a href="">About</a>
            </div>
            <div class="col-md-4">
                <img src="image.png">
            </div>
            <div class="col-md-4"> 
                <a href="#myModal1" data-toggle="modal">SHARE</a>
            </div>
        </div>
    </div>
</div>
htmlcsstwitter-bootstrap
19
Matt

Essaye ça:

DEMO

<div class="container-fluid"> <!-- If Needed Left and Right Padding in 'md' and 'lg' screen means use container class -->
            <div class="row">
                <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                    <a href="#">About</a>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                    <img src="image.png" />
                </div>
                <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                    <a href="#myModal1" data-toggle="modal">SHARE</a>
                </div>
            </div>
        </div>
26
Suganth G
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-4">  
                    <a href="">About</a>
                </div>
                <div class="col-md-4">
                    <img src="image.png">
                </div>
                <div class="col-md-4"> 
                    <a href="#myModal1" data-toggle="modal">SHARE</a>
                </div>
            </div>
        </div>
    </div>
</div>

Vous devez imbriquer les colonnes intérieures dans une ligne plutôt que dans une autre colonne. Il compense le remplissage causé par la colonne avec des marges négatives.

Un moyen plus simple serait

<div class="container">
   <div class="row">
       <div class="col-md-4">  
          <a href="">About</a>
       </div>
       <div class="col-md-4">
          <img src="image.png">
       </div>
       <div class="col-md-4"> 
           <a href="#myModal1" data-toggle="modal">SHARE</a>
       </div>
    </div>
</div>
8
Aibrean

Votre structure DIV imbriquée était manquante, vous devez ajouter un autre ".row" lors de la création de div imbriqués dans le bootstrap:

Voici le code:

<div class="container">
   <div class="row">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-4"> <a href="">About</a>

                    </div>
                    <div class="col-md-4">
                        <img src="https://www.google.ca/images/srpr/logo11w.png" width="100px" />
                    </div>
                    <div class="col-md-4"> <a href="#myModal1" data-toggle="modal">SHARE</a>

                    </div>
                </div>
            </div>
        </div>
    </div>

Reportez-vous à la description de l'exemple Bootstrap pour le même:

http://getbootstrap.com/css/

Colonnes de nidification

Pour imbriquer votre contenu dans la grille par défaut, ajoutez une nouvelle colonne .row et un ensemble de colonnes .col-sm- * dans une colonne .col-sm- * existante. Les lignes imbriquées doivent inclure un ensemble de colonnes ne dépassant pas 12 (il n'est pas nécessaire d'utiliser les 12 colonnes disponibles).

Voici le Fiddle de votre code: http://jsfiddle.net/52j6avkb/1/embedded/result/

3
UID

Bien que cela ne réponde pas à la question du PO, j’ai eu des problèmes avec mes lignes/colonnes de démarrage en essayant de les utiliser en conjonction avec Kendo ListView (même avec le css bootstrap-kendo). 

L'ajout du css suivant a résolu le problème pour moi:

#myListView.k-widget, #catalog-items.k-widget * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
1
emragins

Avez-vous vérifié que ces classes sont présentes dans le CSS? Utilisez-vous le gem Twitter-bootstrap-Rails? Il utilise toujours la version Bootstrap 2.X et il s’agit de classes Bootstrap 3.X. La grille CSS a changé depuis. 

Vous pouvez passer à la branche bootstrap3 de la gem https://github.com/seyhunak/Twitter-bootstrap-Rails/tree/bootstrap3 ou inclure boostrap de manière alternative.

0
szabcsee