web-dev-qa-db-ja.com

bootstrap 3つのクラスを使用して、アイテム/「カード」の垂直リストを作成する必要があります（Rails 3.2、bootstrap3）

私はRuby on Railsを学ぶために毎日の取引アプリを構築しています。

ホームページビューを作成しています。 「カード」を縦に並べただけのリストにしたい（ https://www.intercom.com/blog/why-cards-are-the-future-of-the-web/ を参照） =）、またはより簡単に言えば、灰色の境界線が付いた水平方向の長方形である要素の垂直方向のリスト。

Bootstrapが初めてで、利用可能なクラスがたくさんあります。後でCSSを少しオーバーライドする必要がある場合でも、これらの「カード」に使用できるクラスはありますか？

これが私が欲しい「単純な縦長長方形リスト」の例です。

simple vertical rectangle list layout

多分クラス " list-group-item "ですが、私の四角形はすべて図に示すように分離されており（つまり、互いに接触していない）、各四角形の上に赤いタイトル（つまりタイトルが長方形/アイテムの外側にあるため）、それが正しい選択かどうかはわかりません。

Bootstrap 3のクラスに、私がやりたいことのためのより良い一致がありますか？

htmlcsstwitter-bootstraptwitter-bootstrap-3
14
Mathieu

私の頭の上にあるのは、順不同リストを吐き出しているul> list-group-item> div>その他div>テキスト

私は例を作りました。ここでチェックアウト https://jsfiddle.net/kuntau/X5Wvn/

HTML

<div class="container" >
    <ul class="list-group">
    <li>
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="panel-info">
                    <p><strong>Tel: 011-345-898</strong></p>
                    <p>9182 Lorem Ipsum<br />
                        consectetur adipiscing elit.<br />
                       Nullam vel lacus felis.</p>
                </div>
                <div class="panel-rating">
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <p>Rate Yourself!</p>
                </div>
                <div class="panel-more1">
                    <img src="http://lorempixel.com/100/100" />
                    <br /><span>Caption</span>
                </div>
                <div class="panel-more1">
                    <img src="http://lorempixel.com/100/100" />
                    <br /><span>Caption</span>
                </div>
                <div class="panel-more1">
                    <img src="http://lorempixel.com/100/100" />
                    <br /><span>Caption</span>
                </div>
            </div>
        </div>
    </li>
</ul>
</div>

CSS

.list-group li {
    list-style: none;
}
.panel-info, .panel-rating, .panel-more1 {
    float: left;
    margin: 0 10px;
}
13
Kuntau

見出し付きのパネル と グリッドシステム を使用して応答性を完全に活用するのはどうでしょうか。

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Item title</h3>
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="col-sm-3">first column</div>
            <div class="col-sm-3">secondcolumn</div>
            <div class="col-sm-2">3rd column</div>
            <div class="col-sm-2">4th column</div>
            <div class="col-sm-2">5th column</div>
        </div>

ほんの少しのCSSで垂直の境界線をレンダリングします：

div.row > div:first-child {
    border-right: 1px solid #ccc;
}
div.row > div:nth-child(5) {
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
}

このフィドルを確認してください： https://jsfiddle.net/bostaf/eqn93g6j/ 。ビューポートのサイズを変更して、動作の応答性を確認します。

7
Taz