質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2280閲覧

Bootstrap で li を3分割したい。

Yama-guchi

総合スコア18

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/06/02 07:53

bootstrap の grid を使用して、li を1行に3つ (col-md-4) 表示したいですが、
2つの li が一行に表示されます。

1行に3等分し、それぞれに li を表示するには、どのようにすればよろしいのでしょうか。

イメージ説明

html

1 <ul class="list-unstyled list-inline"> 2 <li class="list-inline-item col-md-4"> 3 <div class="card"> 4 <p>aaa</p> 5 <p>bbb</p> 6 <p>ccc</p> 7 <p>ddd</p> 8 </div> 9 </li> 10 <li class="list-inline-item col-md-4"> 11 <div class="card"> 12 <p>aaa</p> 13 <p>bbb</p> 14 <p>ccc</p> 15 <p>ddd</p> 16 </div> 17 </li> 18 <li class="list-inline-item col-md-4"> 19 <div class="card"> 20 <p>aaa</p> 21 <p>bbb</p> 22 <p>ccc</p> 23 <p>ddd</p> 24 </div> 25 </li> 26 <li class="list-inline-item col-md-4"> 27 <div class="card"> 28 <p>aaa</p> 29 <p>bbb</p> 30 <p>ccc</p> 31 <p>ddd</p> 32 </div> 33 </li> 34 <li class="list-inline-item col-md-4"> 35 <div class="card"> 36 <p>aaa</p> 37 <p>bbb</p> 38 <p>ccc</p> 39 <p>ddd</p> 40 </div> 41 </li> 42 </ul>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

list-inline-item がmarginを取ってしまっているため、 col-md-4 をやると3分の1分の横幅を取るプラスmargin分の横幅を取ってしまいっている可能性があります。
一度検証をしてみて、与えられているCSSはどうなっているか、それを消したらどうなるかを試してみるのがおすすめです!ご参考までに!
https://ferret-plus.com/1880

ですので、こちらのようにmarginを消すか、

css

1.list-inline>li { 2 margin-right: -10px; 3}

そもそも .list-inline を使用しないやり方でやったほうがいいかもしれないですね。
https://blog.dafu.cf/bootstrap4-horizoncard/

投稿2019/06/02 08:09

編集2019/06/02 08:10
fumito_94

総合スコア679

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Yama-guchi

2019/06/02 11:02

迅速な回答ありがとうございました。 list-inline が悪さしてるんですね、 list-inline と grid を組み合わせるのってスタンダードではないんですかね?
fumito_94

2019/06/03 02:50

> list-inline と grid を組み合わせるのってスタンダードではないんですかね? いろいろ調べてみましたが、あまり使っていないようでした。 なので、スタンダードではないといえばそうなのかもしれないですね。 横幅100%使わないのであればいいかとおもいますが、使うのであればgridを小さくするか、別の方法classでやるほうがいいかもしれないです!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問