【Bootstrap】containerの左右の余白をなくしたい

Question

bootstrapでグリッドシステムを使用していますが左右に余白ができてしまいます。
画面いっぱいにcol-xs7,col-xs5を使用するにはどうしたら良いでしょうか？

container自体に

.container{
 width:100%;
}

を入れることで画面いっぱいになりましたが、他のページでも使用しているcontainerにも影響がでてしまいます。

複数のclass名を入れることでどうにかならないかなと思ったのですが、

<div class="container　hoge">

.hoge{
 width:100%;
}

これは左右の余白が取れませんでした。
どうしたら良いでしょうか？

質問投稿後に追記しました

container-fluidで試してみました。

<title><%= full_title(yield(:title)) %></title>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-7">
    <h2>col-xs-7</h2>
    </div>
    <div class="col-xs-5">
    <h2>col-xs-5</h2>
        <div class="form-inline aba">
        <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
          <div class="form-group aaa">
          <%= f.email_field :email, autofocus: true, 
          :class => "form-control my-form session-form",
          :placeholder => "メールアドレス" %>
          </div>
          <div class="form-group aaa">
          <%= f.password_field :password, autocomplete: "off",
          :class => "form-control my-form session-form",
          :placeholder => "パスワード" %>
          </div>
          <div class="form-group aaa">
          <div class="actions">
            <%= f.submit "ログイン", :class => "btn btn-primary session" %>
          </div>
          </div>
        <% end %>
        </div>
      <%= link_to "アカウント登録", new_user_registration_path, class:"btn" %>
      <br>
      <%= link_to "サイトについて", home_index_path, class:"btn" %>
    </div>
  </div>
</div>

と言う感じになります。container-fluidの色は紫になります。
ヘッダー部分は全画面になっていますが、col部分の余白はなくなりませんでした。

やりたいこととしてはcolを画面いっぱいに使用したいということなので、col自体にwidth:100%を使用してみましたがダメでした。

Answer 1

container-fluidを使えば大丈夫だと思います。

<div class="container-fluid">
    <div class="row">
        <div class="col-xs7">
        </div>
        <div class="col-xs5">
        </div>
    </div>
</div>

でどうでしょうか。
参考リンク

追記

全幅で、なおかつ一つの行を12分割する、という要件について私の環境では成功しました。
以下その時に使ったコードを記載します。

<div class="container-fluid">
    <div class="row">
        <div class="col-7" style="background-color:pink;">
          hoge
        </div>
        <div class="col-5" style="background-color:green;">
          fuge
        </div>
    </div>
</div>

とViewテンプレートファイルに記載すると、

このように、二列に分割されることなく横幅いっぱいまで表示されました。

また、ningenさんのコードを概ね踏襲した、以下のようなコードにしてみても成功しました。

<div class="container-fluid">
  <div class="row">
    <div class="col-7" style="background-color:pink;">
    col-7
    </div>
    <div class="col-5" style="background-color:green;">
    col-5
        <div class="form-inline aba">
          <div class="form-group aaa">
            hoge
          </div>
          <div class="form-group aaa">
            hoge
          </div>
          <div class="form-group aaa">
          <div class="actions">
            hoge
          </div>
          </div>
        </div>
      <br>
      hage
    </div>
  </div>
</div>

環境は以下で行いました。

• Rails 5.2.1
• ruby 2.4.1p111 (2017-03-22 revision 58053) [x86_64-linux]
• bootstrap 4.1.3

ningenさんの環境でうまくいかなかった理由ですが、
BootstrapのCSSテンプレート自体に手を加えていらっしゃるように見受けられますので、
その影響が出ているのかもしれません…
Bootstrapをデフォルトの状態にしてからもう一度試してみては如何でしょうか。

Comments

[退会済みユーザー]

回答ありがとうございます。
container-fluidを試してみましたが、どうもうまくいかないみたいです。
ソースコードの全容と結果を質問内容に追記いたしますので、よろしければ一読してください。

[troch]

失礼しました。
---------
<div class="col-xs-7">
</div>
<div class="col-xs-5">
</div>
---------
の箇所を
---------
<div class="col-7">
</div>
<div class="col-5">
</div>
---------
に変更してみるとどうでしょうか。

[troch]

ブレイクポイントなしの設定にすれば
ブラウザの画面サイズが幾らであってもグリッドシステムが適用されると思います。
参考リンク：https://cotodama.co/bootstrap4_break-point/

[退会済みユーザー]

回答ありがとうございます。
試してみた結果、
"col-xs-7"
"col-xs-5"
と,２列に並んでしまいました。
cntainerにclass名がつけれたら楽なんですけどねー…。
trochさん、丁寧にありがとうございました！
やり方を変えてみます。

[退会済みユーザー]

うまく、１ページだけフル画面にすることができました！
trochさんの言うとうりもう一度試してみて良かったです！
自分の時間を割いてまで、回答、並びに検証までして頂きありがとうございました。
すごく丁寧でわかりやすかったです。

[troch]

良かったです！
アプリ制作、頑張ってください！