Bootstrap グリットシステムについて

Question

Bootstrap　グリットシステムについて

実現したい形

１、対象年齢別検索のサイドバーと絵本のタイトルで検索する（Pタグ）と検索フォームと検索ボタンを横並びで表示。
２、サイドバーの隣に新着商品が４つ並ぶ形で表示。
３、新着商品の画像の下に横書きで商品名。その下に横書きで料金を表示。

試したこと

中身省略している部分あり
一番下に省力なしのコードを載せています
<div class="container">
  <div class="row">
    <div class="col-md-2 table">
    <div>
    <div class="col-md-10">
上記の記述でtableの部分と検索の部分を記述する場所を分けたつもり
      <div class="row">  ←この記述でcol-md-10の幅のなかでさらに12分割できるよう設けた
        <%= search_form_for @q, url: search_items_path do |f| %>
          <p class="col-md-8"><%= f.label :name_cont, '絵本のタイトルで検索する' %></p>
          <p class="col-md-2"><%= f.search_field :name_cont %></p>
          <p class="col-md-2"><%= f.submit '検索' %></p>
        <% end %>
      </div>

<div class="container">
  <h1 class="main-visual-text text-center pt-5">みんなの絵本屋さん<h1>
  <div class="row">
    <table class="col-md-2 table table-bordered">
      <thead>
        <tr>
          <th>対象年齢別検索</th>
        </tr>
      </thead>
      <tbody>
        <tr><td><%= link_to "0歳児", category_search_items_path(:category_id => 1) %></td></tr>
        <tr><td><%= link_to "1歳児", category_search_items_path(:category_id => 2) %></td></tr>
        <tr><td><%= link_to "2歳児", category_search_items_path(:category_id => 3) %></td></tr>
        <tr><td><%= link_to "3歳児", category_search_items_path(:category_id => 4) %></td></tr>
        <tr><td><%= link_to "4歳児", category_search_items_path(:category_id => 5) %></td></tr>
        <tr><td><%= link_to "5歳児", category_search_items_path(:category_id => 6) %></td></tr>
      </tbody>
    </table>
    <div class="col-md-10">
      <div class="row">
        <%= search_form_for @q, url: search_items_path do |f| %>
          <p class="col-md-8"><%= f.label :name_cont, '絵本のタイトルで検索する' %></p>
          <p class="col-md-2"><%= f.search_field :name_cont %></p>
          <p class="col-md-2"><%= f.submit '検索' %></p>
        <% end %>
      </div>
      <h2 class="py-3">新着商品</h2>
      <div class="item row mr-5">
        <% @items. first(4).each do |item| %>
            <%= link_to item_path(item.id) do %>
              <p class="col-3"><%= attachment_image_tag item, :image, :size => '120x100'%></p>
              <p class="col-3"><%= item.name %></p>
              <p class="col-3"><%= item.price %>円（税抜）</p>
            <% end %>
        <% end %>
      </div>
    </div>
  </div>
  <div class="float-right">
    <%= link_to "全ての商品を表示", items_path %>
  </div>
</div>

長くなってしまいましたがご教示いただけますと幸いです。
よろしくお願いいたします。

Comments

[m.ts10806]

質問は何でしょうか。
現状の問題点、解決したいことを記載してください。

[winterboum]

その日本語では実現したい形 がイメージできません。
手書きでも Excelを使って表現でも よいので それも載せましょう

[one]

大変失礼いたしました。
実現したい形を画像として載せました。
ご教示いただけたら幸いです。よろしくお願いいたします。

Answer 1

レイアウトに慣れるまではいきなり中身のあるViewを書くのではなく、レイアウトだけまず作って、その箱の中に中身を順次書いていく、というのを薦めます。
といのは、なかみって大体長くなってしまうので、構造がわかりにくくなってしまうからです。
のでわたしは中身はpartialで書いてしまうことが多いです。
まず画面を横に切り離せるところが無いか見ます。
このデザインの場合、上：横線の上 中：横線の直下１行 下：その下 に分けられるかと。それらを div class="row" で囲みます。

<div class ="row">
   上
</div>
<div class ="row">
   中
</div>
<div class ="row">
   下
</div>

次に各々の中で、縦に切り離せるところがないか見ます。このデザインの 下 の場合 年齢別商品 の所とその右側です。
それらをおのおの div class="col--" で くくります

<div class ="row">
    <div class="col-md-3">
        下左
    </dev>
    <div class="col-md-9">
        下右
    </dev>
</div>

次にそれらを横に切り離せるところを探します。このデザインの下右 の場合 新着商品 と 絵本画像の間です。
それらを各々 row でくくります

<div class ="row">
    <div class="col-md-3">
        下左
    </dev>
    <div class="col-md-9">
        <div class="row">
            下右上
        </div>
        <div class="row">
            下右下
        </div>
    </dev>
</div>

次に それらの各々について 縦に ・・・・・・・
と続く

Comments

[one]

初学者の私でも、とても丁寧にわかりやすく記してくださりありがとうございます。
ここ３日間ぐらい悩んでいたので本当に助かりました。