Boostrapで横並びにできなくて困っています。

Question

Boostrapについて質問です。
下記の原因と解決方法についてご教示いただけませんでしょうか？

[実現したいこと]
部分テンプレート2つは縦並び
User pageは部分テンプレートの右側に配置したい。

[発生している問題]

---

<div class="container px-5 px-sm-0"> <div class="row"> <div class="col-md-3"><!--部分テンプレート全体--> <%= render 'users/user_info', users: @user %> <%= render ' books/post_book',books: @new_book %> </div> <div class="col-md-8 offset-md-1"><!--User page全体--> <h2>Users</h2> <table>class="table" <thead> <tr> <th>image</th> <th>name</th> <th colspan="3"></th> </tr> </thead> <tbody> <% @books.each do |book| %> <div> <%= attachment_image_tag @user, :profile_image, :fill, 100, 100, format: 'jpeg', fallback: "no_image.jpg" %> <%= attachment_image_tag @user, :profile_image, :fill, 100, 100, format: 'jpeg', fallback: "no_image.jpg" %> <p><%= book.title %></p> <p><%= book.body %></p> <p><%= book.user.name %></p> </div> <% end %> </tbody> </table> </div> </div> </div>

---

上記のコードで横並びにできませんでした。
rowとcolの関係に問題があるのでしょうか？
初心者のため、何もわからない状態です。
不足している情報等あれば合わせてご指摘いただけると助かります。
よろしくお願いいたします。

Answer 1

Grid のタグに問題はないです。
ちゃんと横並びに表示されました。

補足：スマホで横余白なし、タブレット以上は余白ありにしたいなら、
px-5 px-sm-0 でなく、px-0 px-md-5 です。

Comments

[Ms.suger]

返信が遅くなり、大変申し訳ありません。
解決いたしました！

Answer 2

col-md-8 offset-md-1
offsetを削除してください

Comments

[Ms.suger]

ご回答ありがとうございます。
削除してみたのですが、やはり変化はありませんでした。

[winterboum]

画面載せて

[winterboum]

あ、勘違いしてた 3+8 で12になると。 offset-md-1 いれて12だからここかんけいなかったですね。

[winterboum]

あと、読みづらいので codeは<code>使って載せてください。
codeを 半角逆クォーテーション３つ ``` だけの行で挟むとできます。、

[Ms.suger]

返事が遅くなり、大変申し訳ございません。
Linkが間違っており、そもそも開いているページが異なっておりました…。

あと、読みづらいので codeは<code>使って載せてください。
>>大変失礼いたしました。使い方がわかっておりませんでした。
以後気をつけます。