web-dev-qa-db-fra.com

Twitter Bootstrap grille à l'intérieur d'un panneau

J'essaie d'utiliser le système de grille de Bootstrap pour accomplir avoir une image sur le côté gauche tout en étant capable d'avoir du contenu (texte autre bootstrap composants) de remplissage) l'espace à droite. Le seul problème que j'ai avec ceci est que je n'arrive pas à faire passer le texte là où je le veux.

Le texte "STUFF" représente le contenu. Je souhaite que le contenu soit placé à droite de l'image non en dessous (la zone encadrée ci-dessous). J'ai essayé d'utiliser un système de grille pour accomplir cela mais je le fais mal ou je ne peux pas utiliser cette méthode.

screenshot

J'utilise Twitter Bootstrap version 3.0.2. Mon code HTML est présent ci-dessous (excusez le code inefficace, je l'utilisais pour jouer) J'utilise le Bootstrap Fichiers .css .js, avec quelques modifications mineures qui ne concernent pas mon problème.

Informations supplémentaires: J'utilise 2 pages HTML (c'est absurde, non?), 1 (la zone la plus claire) dans l'autre (la page principale/la zone la plus sombre/extérieure). Le code HTML que je fournis est le code de la page intérieure.

De plus, je voudrais savoir comment avoir un "horizontal" <hr> Entre l'image et le contenu.

<!DOCTYPE html>
<html>
    <head>
        <title>TITLE</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="../../assets/css/bootstrap.css" rel="stylesheet">
    </head>
    <body style="background-color: #F0F0F0; padding-top: 15px">
            <div class="panel panel-default" style="margin-left: 15px; margin-right: 15px">
                <div class="panel-heading">
                    <h3 class="panel-title">Panel title</h3>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-2">
                            <img src="http://placehold.it/140x140" class="img-rounded" style="width: 100px; height: 100px">
                        </div>
                        <div class="col-md-10">
                            STUFF
                        </div>
                    </div>
                </div>
            </div>
        <hr>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="../../assets/js/bootstrap.js"></script>
    </body>
</html>
twitter-bootstrapgridpaneltwitter-bootstrap-3
19
user2994267

Essaye ça..

 <div class="panel panel-default" style="margin-left: 15px; margin-right: 15px">
   <div class="panel-heading">
     <h3 class="panel-title">Panel title</h3>
   </div>
   <div class="panel-body">
     <div class="row">
       <div class="col-md-2">
         <img src="http://placehold.it/140x140" class="img-rounded" style="width: 100px; height: 100px">
       </div>
       <div class="col-md-10">
         STUFF
       </div>
     </div>
   </div>
</div>
<hr>
 <div class="panel panel-default" style="margin-left: 15px; margin-right: 15px">
   <div class="panel-heading">
     <h3 class="panel-title">Panel title</h3>
   </div>
   <div class="panel-body">
     <div class="row">
       <div class="col-xs-2">
         <img src="http://placehold.it/140x140" class="img-rounded" style="width: 100px; height: 100px">
       </div>
       <div class="col-xs-10">
         STUFF
       </div>
     </div>
   </div>
</div>

http://bootply.com/94268

25
Zim