color - Twitter Bootstrap rejilla dentro de un panel
panel html css (1)
Prueba esto..
<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>
bootply.com/94268
Estoy tratando de usar el sistema de cuadrícula de Bootstrap para lograr tener una imagen en el lado izquierdo mientras puedo tener contenido (texto y otros componentes de bootstrap) llenando el espacio a la derecha. El único problema que tengo con esto es que no puedo conseguir que el texto vaya a donde quiero.
El texto "STUFF" representa el contenido. Me gustaría que el contenido se coloque a la derecha de la imagen y no debajo (el área en el recuadro que se muestra a continuación). Intenté usar un sistema de cuadrícula para lograr esto pero lo estoy haciendo incorrectamente o no puedo usar este método.
Estoy usando Twitter Bootstrap versión 3.0.2. Mi código HTML está presente a continuación (disculpe el código ineficiente, lo estaba usando para jugar) y estoy usando los archivos Bootstrap .css y .js, con algunas ediciones menores que no corresponden a mi problema
Información adicional: estoy usando 2 páginas HTML (qué absurdo, ¿verdad?), 1 (el área más clara) dentro de la otra (la página principal / el área más oscura / exterior). El código HTML que proporciono es el código de la página interna.
Además, me gustaría saber cómo tener una <hr> horizontal ''entre la imagen y el contenido.
<!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>