3

私は使用してbootstrapおり、多くの列に表示されるアイテムのリストを実装する必要があります。

Bootstrap は、12 セル幅のグリッドを使用します。私の項目は 3 セル幅 (これが私がロールする方法です) であり、行には 4 つの項目しかないことを意味します。

item 1 | item 2 | item 3 | item 4 
item 5

Myitemは単純なテキストではなく、「カード」です:ここに画像の説明を入力

コードはそこにあります。

これを書く簡単な方法は次のようになります。

<div class="row">
    <div class="col-md-3">[item 1]</div>
    <div class="col-md-3">[item 2]</div>
    <div class="col-md-3">[item 3]</div>
    <div class="col-md-3">[item 4]</div>
</div>
<div class="row">
    <div class="col-md-3">[item 5]</div>
</div>

しかし、セマンティックではないように感じます。私のアイテムが多くの行に表示されるという事実は、プレゼンテーションの選択に本当に関係しています.

さらに、アイテムの幅を広げる必要があると判断した場合は、(クラス属性ではなく) ドキュメントの構造を変更する必要があります。

それに加えて、すべてのアイテムが互いに重ねて表示されるモバイル画面では、物事を行う方法はさらに人工的です。

私のリストを書く別の方法はありますか？より「セマンティックな」方法？

4

3 に答える 3

4

私の立場からすると、ハイパーテキスト マークアップを使用して順序付けられていない LIST を表示する最良の方法は次のとおりです。

<ul>
    <li>

したがって、幅を 25% にul>li 設定するリストを試すことができます。<li>

5 番目の要素は、左下にスタックすることになっています。

ブートストラップ グリッド システムを引き続き使用する場合は、「アイテム」を同じ行に配置します。

<div class="row">
    <div class="col-md-3">item 1</div>
    <div class="col-md-3">item 2</div>
    <div class="col-md-3">item 3</div>
    <div class="col-md-3">item 4</div>
    <div class="col-md-3">item 5</div>
    <div class="col-md-3">item 6</div>
    <div class="col-md-3">item 7</div>
</div>

オーバーフローした要素は左下にスタックされます。

試してみてください：

<ul class="row">
    <li class="col-md-3">item 1</li>
于 2013-11-04T21:01:32.450 に答える
3

UL リストを使用できます。

<ul class="list-unstyled">
    <li class="col-md-3">item 1</li>
    <li class="col-md-3">item 2</li>
    <li class="col-md-3">item 3</li>
    <li class="col-md-3">item 4</li>
    <li class="col-md-3">item 5</li>
    <li class="col-md-3">item 6</li>
    <li class="col-md-3">item 7</li>
</ul>

デモ: http://bootply.com/91825

ただし、幅を広げる場合は、このマークアップを変更する必要があります。

于 2013-11-04T21:14:45.587 に答える
1

1.このページ@gridColumnsで好みに合わせて設定するか、必要に応じてcss.lessをオーバーライドすることにより、デフォルトの12スペースグリッドをいつでも好みに変更できます。

2.Bootstrapを使用すると、カスタム クラスインラインを使用してリストを作成できます。

<ul class="inline">
  <li>...</li>
</ul>

3.しかし、Milche が言及したように、1 つの行に固執する場合、col-md-3はそのトリックを行います。ただし、インラインであることを明確にするために、タグを使用すると思います。

于 2013-11-04T21:31:22.287 に答える