Щебетать сетки лотка в панели

Я пытаюсь использовать сетчатую систему Bootstrap для выполнения изображения с левой стороны, имея возможность иметь контент (текст и другие компоненты начальной загрузки), заполняя пробел вправо. Единственная проблема, с которой я сталкиваюсь, заключается в том, что я не могу заставить текст идти туда, где я хочу.

Текст "STUFF" представляет содержимое. Я хотел бы, чтобы содержимое было помещено справа от изображения, а не ниже (область в коробке, показанная ниже). Я попытался использовать сетку для выполнения этого, но я либо делаю это неправильно, либо не могу использовать этот метод.

screenshot

Я использую Twitter Bootstrap версии 3.0.2. Мой HTML-код присутствует ниже (извините неэффективный код, я использовал его для воспроизведения), и я использую файлы Bootstrap.css и .js с некоторыми незначительными изменениями, которые не относятся к моей проблеме.

Дополнительная информация: Я использую 2 страницы HTML (как абсурдно, правильно?), 1 (более легкая область) внутри другой (главная страница/более темная/внешняя область). Код HTML, который я предоставляю, является кодом внутренней страницы.

Кроме того, я хотел бы знать, как иметь "горизонтальный" <hr> между изображением и контентом.

<!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>

Ответы

Ответ 1

Попробуйте это.

 <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