bootstrapでコンテンツをループ処理する際のタグの構造について

以下のようなビューのレイアウトを20個とかループ処理したい場合、みなさんならどうしますか？

PC構造

スマホ構造

これらを20個以上ループ処理したい

１、グリッドシステムの利用

HTML
1<div class="row content1">
2 <div class="col-sm-4">content2</div>
3 <div class="col-sm-4">content3</div>
4 <div class="col-sm-4">content4</div>
5</div>

２、独自にliタグを作り、ブレイクポイントで適宜設定

HTML
1<div class="content1">
2 <ul>
3  <li class="content2">content2</li>
4  <li class="content3">content3</li>
5  <li class="content4">content4</li>
6 </ul>
7</div>

私の中では、グリッドシステムは大きいviewのコンテンツに使用するというルールがあったりしますが、実際のところ、こういう小さいコンテンツ系にもrow～sm-4などと設定したほうがいいのでしょうか。

みなさんならどうしますか？

行動規範の内容に同意します

回答1件

ベストアンサー

bootstrapの使用目的によって変わってくると思いますが、基本は1のグリッドを使いますね。＜個人的にです
おそらく.content1の前後はグリッドを使用していると思うので、全体的なバランスや後々のメンテナンスを考えると。
もちろん独自でやらないと実現できないとかであれば別ですが。

大まかなnavやmainなどのレイアウトだけbootstrapにまかせてmainの中はゴリゴリ独自で書くというルールにしている場合は2です。

リストを使用するならこんな感じですかね。

html
1<ul class="content1 row">
2	<li class="col-sm-4">content2</li>
3	<li class="col-sm-4">content3</li>
4	<li class="col-sm-4">content4</li>
5</ul>
6
7<div class="row">
8	<ul class="content1">
9		<li class="col-sm-4">content2</li>
10		<li class="col-sm-4">content3</li>
11		<li class="col-sm-4">content4</li>
12	</ul>
13</div>