7

Bootstrap 3 RC2 を使用して CSS でこれら 3 つの画像の間にスペースを配置する最良の方法はどれですか#picture?鬼ごっこ。インラインで画像のサイズを変更してほしいと思います。

ここに私のマークアップがあります:

<div class="container">
    <div class="row">
        <div class="col-lg-4">
            <img src="http://placehold.it/350x250" id="picture" />
        </div>
        <div class="col-lg-4">
            <img src="http://placehold.it/350x250" id="picture" />
        </div>
        <div class="col-lg-4">
            <img src="http://placehold.it/350x250" id="picture" />
        </div>
    </div>
</div>

CSS:

.container {
    max-width:1000px;
    background-color:white;
}
body {
    background-color:cyan
}
#picture {
    width:auto;
    /*margin-left:10px; */
    /*margin-right:10px; */
}
.col-lg-4 {
    margin-left:10px;
    margin-right:10px;
}

より明確なビューについては、私のフィドルを確認してください。これを処理するためのより良い方法はありますか？

4

3 に答える 3

2

Harm Wellink が述べたように、css を削除します。次の html のみが必要です。「col-xs-4」と「img-responsive」クラスに注意してください。すべての画面サイズで 3 つの列を使用する場合は、col-sm-4、col-md-4、col-lg-4 は必要ありません。

<div class="container">
<div class="row">
    <div class="col-xs-4">
        <img src="http://placehold.it/350x250" id="picture1" class="img-responsive" />
    </div>
    <div class="col-xs-4">
        <img src="http://placehold.it/350x250" id="picture2" class="img-responsive" />
    </div>
    <div class="col-xs-4">
        <img src="http://placehold.it/350x250" id="picture3" class="img-responsive" />
    </div>
</div>

于 2014-01-19T19:30:59.697 に答える
0

私があなたの質問を正しく理解していれば、これらの写真を横一列に並べて、写真の間に一定のスペースを空けて表示したいと思いますか?

まず、DIV をインラインで取得するには、次のように変更します。

.col-lg-4 {
   display: inline-block;
}

コンテナーと行の幅 (例: 100%) を指定してから、画像を保持する div を指定してみてください。これがあなたを助けてくれることを願っていますか？

于 2013-08-19T00:18:19.343 に答える