Bootstrapの横並びが正常に作動しない

前提・実現したいこと

ボックスを3つ横並びにさせたい

ここに質問の内容を詳しく書いてください。
html&CSSでサイト作成を行っております。
その際レスポンシブ対応をしたい為、bootstrapを使用しましたが正常に稼動せず。

発生している問題・エラーメッセージ

inline-blockを使用して横並びにしているが、最後の項目のみ改行されてしまう。

エラーメッセージ


### 該当のソースコード

HTML
ソースコード
       <div class="container">
            <div class="row">
              <div class="tsuyomi_box col-xs-12">
                <div class=tsuyomi_text>
                  <div class="tsuyomi_inline col-sm-4 col-xs-12">
                    <p class="tuyomi_border">手ぶらで入居ができる</p>
                  </div>
                  <div class="tsuyomi_inline2 col-sm-4 col-xs-12">
                    <p class="tuyomi_border">手ぶらで入居ができる</p>
                  </div>
                  <div class="tsuyomi_inline3 col-sm-4 col-xs-12">
                    <p class="tuyomi_border">手ぶらで入居ができる</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

試したこと

元となるmax-widthの変更やwidthの変更を行いましたがうまくいかず

補足情報（FW/ツールのバージョンなど）

初心者です

seastar3

2018/10/13 04:15

btn クラス指定がありませんね。tsuyomi_box と　tuyomi_borderと、命名ルールが揃っていません。実際にこうなっているのですか。

kurodamanamu

2018/10/13 04:24

btnクラス指定はどこにすれば良いですかね...?実際にこうなってます。

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

回答2件

ベストアンサー

CSSがないのでHTMLだけ見ると、横１列分のグリッドの中に入ってるから、ブラウザサイズを大きくしても縦３段レイアウトのままでは？
横１列分のグリッドの中で更にグリッドを横に配置したい場合は、.rowをネストして下さい。

・グリッドレイアウトについては、Bootstrap4移行ガイド-グリッド-を参考にどうぞ
・.rowのネストについては、bootstrap rowの入れ子を参考にどうぞ

投稿2018/10/13 04:52

miyakichi

総合スコア297

kurodamanamu

2018/10/13 06:23

ありがとうございます。 rowがもう一つ必要だったという事ですね。いただいた参考ページを元に編集したところ無事横並びになりました！ありがとうございました。

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

環境やそもそもCSSが提示されていないため推測でコードを記載しますが以下のコードで３３列等幅で表示されるのでは無いでしょうか？

HTML
1<div class="container">
2            <div class="row">
3              <div class="tsuyomi_box col-xs-12">
4                <div class="tsuyomi_text row">
5                  <div class="tsuyomi_inline col-sm-4 col-xs-4">
6                    <p class="tuyomi_border">手ぶらで入居ができる</p>
7                  </div>
8                  <div class="tsuyomi_inline2 col-sm-4 col-xs-4">
9                    <p class="tuyomi_border">手ぶらで入居ができる</p>
10                  </div>
11                  <div class="tsuyomi_inline3 col-sm-4 col-xs-4">
12                    <p class="tuyomi_border">手ぶらで入居ができる</p>
13                  </div>
14                </div>
15              </div>
16            </div>
17          </div>