フォームとボタンの幅を揃えたい

Question

フォームとボタンの幅を揃えたい

フォームとボタンのpaddingの幅の判定が異なっているため、見た目が揃いません。
解決策はないでしょうか？

ちなみにBootstrap4を使いp-0をaタグを囲ったdivタグに記入してもなおりませんでした。

<div class="container mx-auto">
            <div class="row">
              <div class="col-md-12 p-0">
                <!-- <p>東京</p> -->
                <input type="text" class="form-control mb-2" placeholder="ロケーション" value="東京">
              </div>
              <div class="col-md-7 p-0">
                <!-- <p>まるまる貸切</p> -->
                <select class="custom-select custom-select mb-2">
                  <option selected>まるまる貸切</option>
                  <option value="1">個室</option>
                  <option value="2">シェアルーム</option>
                </select>
              </div>
              <div class="col-md-5 p-0">
                <!-- <p>ゲスト4人</p> -->
                <select class="custom-select custom-select mb-2">
                  <option value="1">ゲスト１人</option>
                  <option value="2">ゲスト２人</option>
                  <option value="3">ゲスト３人</option>
                  <option selected>ゲスト４人</option>
                  <option value="5">ゲスト５人</option>
                  <option value="6">ゲスト６人</option>
                  <option value="7">ゲスト７人</option>
                  <option value="8">ゲスト８人</option>
                  <option value="9">ゲスト９人</option>
                  <option value="10">ゲスト１０人</option>
                  <option value="11">ゲスト１１人</option>
                  <option value="12">ゲスト１２人</option>
                  <option value="13">ゲスト１３人</option>
                  <option value="14">ゲスト１４人</option>
                  <option value="15">ゲスト１５人</option>
                  <option value="16">ゲスト１６人</option>
                </select>
              </div>
            </div>
          </div>
          <div class="col-12">
            <a href="" class="btn btn-danger btn-block btn-lg mt-3">はじめる</a>
          </div>
        </div>
        </div>
      </div>

Comments

[okina]

codeを示してください。

Answer 1

.col-12{
  padding:0;
}

.row{
 margin: 0; 
}

<div class="container mx-auto">
            <div class="row">
              <div class="col-md-12 p-0">
                <!-- <p>東京</p> -->
                <input type="text" class="form-control mb-2" placeholder="ロケーション" value="東京">
              </div>
              <div class="col-md-7 p-0">
                <!-- <p>まるまる貸切</p> -->
                <select class="custom-select custom-select mb-2">
                  <option selected>まるまる貸切</option>
                  <option value="1">個室</option>
                  <option value="2">シェアルーム</option>
                </select>
              </div>
              <div class="col-md-5 p-0">
                <!-- <p>ゲスト4人</p> -->
                <select class="custom-select custom-select mb-2">
                  <option value="1">ゲスト１人</option>
                  <option value="2">ゲスト２人</option>
                  <option value="3">ゲスト３人</option>
                  <option selected>ゲスト４人</option>
                  <option value="5">ゲスト５人</option>
                  <option value="6">ゲスト６人</option>
                  <option value="7">ゲスト７人</option>
                  <option value="8">ゲスト８人</option>
                  <option value="9">ゲスト９人</option>
                  <option value="10">ゲスト１０人</option>
                  <option value="11">ゲスト１１人</option>
                  <option value="12">ゲスト１２人</option>
                  <option value="13">ゲスト１３人</option>
                  <option value="14">ゲスト１４人</option>
                  <option value="15">ゲスト１５人</option>
                  <option value="16">ゲスト１６人</option>
                </select>
              </div>
            </div>
           <div class="col-12">
            <a href="" class="btn btn-danger btn-block btn-lg mt-3">はじめる</a>
          </div>

          </div>

現状のコードをできるだけ維持しました。別途classを付与されることをお勧めします。
divの数がこの部分だけだと明らかにおかしいですが大丈夫ですか？この部分だけで正しくなるように修正しています。ボタンもcontainerの中に入れました。