web-dev-qa-db-ja.com

Twitter Bootstrapパネル内のグリッド

Bootstrapのグリッドシステムを使用して、コンテンツを保持しながら左側に画像を配置することを試みています（テキストおよびその他のbootstrapコンポーネント）これに関する唯一の問題は、テキストを目的の場所に移動できないことです。

テキスト「STUFF」はコンテンツを表します。コンテンツを下ではなく画像の右側に配置したいと思います（下のボックス領域）。グリッドシステムを使用してこれを達成しようとしましたが、間違って実行しているか、この方法を使用できません。

screenshot

私はTwitterを使用していますBootstrap version 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>
twitter-bootstrapgridpaneltwitter-bootstrap-3
19
user2994267

これを試して..

 <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