20

Bootstrap のグリッド システムを使用して、右側のスペースを埋めるコンテンツ (テキストとその他のブートストラップ コンポーネント) を左側に配置しながら、画像を左側に配置しようとしています。これに関する唯一の問題は、テキストを目的の場所に移動できないことです。

「STUFF」という文字が内容を表しています。コンテンツを画像の下ではなく右に配置したいと考えています (以下のボックスで囲まれた領域)。これを実現するためにグリッド システムを使用しようとしましたが、やり方が間違っているか、この方法を使用できません。

スクリーンショット

Twitter Bootstrap バージョン 3.0.2 を使用しています。私の HTML コードを以下に示します (非効率的なコードで申し訳ありませんが、これを使って遊んでいました) & 私は Bootstrap .css & .js ファイルを使用していますが、私の問題に関係のない小さな編集を加えています。

追加情報: 私は 2 つの HTML ページ (なんてばかげていますか?) を使用しており、1 つ (明るい領域) をもう 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>
4

1 に答える 1

26

これを試して..

 <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

于 2014-01-16T19:18:53.897 に答える