bootstrap flexの幅指定が効かない

前提・実現したいこと

bootstrapのflexを用いて、横並びの実装をしているのですが、１つのcolのみ、幅指定が効きません。
幅を大きくしたい要素は、全ソースコードのうち、下記の部分となるのですが、col-2をcol-3にして、rowの中が全部で12になるよう他の要素を小さく設定しても、幅が大きくなりません。

<div class="row col-2 custom-control custom-switch custom-switch-radio-position switch-btn">
        　　<input type="checkbox" class="custom-control-input col-4" id="customSwitch1"data-toggle="collapse" data-target="#collapseExample" aria-expanded="true"aria-controls="collapseExample">
        　　<label class="custom-control-label text-left font-1 col-8" for="customSwitch1">検索ボタン</label>
</div>

（下記全ソースコードの一番はじめのcolです。）

全ソースコード

html
1<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
2        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
3
4<section id="search">
5            <form class="id=" action="/projects" accept-charset="UTF-8" method="get">
6                <div class="container-fluid">
7                    <div class="row search-content">
8                        <div class="row col-2 custom-control custom-switch custom-switch-radio-position switch-btn">
9                              <input type="checkbox" class="custom-control-input col-4" id="customSwitch1"
10                                  data-toggle="collapse" data-target="#collapseExample" aria-expanded="true"
11                                  aria-controls="collapseExample">
12                              <label class="custom-control-label text-left font-1 col-8" for="customSwitch1">検索ボタン</label>
13                          </div>
14                        <div class="col-1">
15                            <div class="form-group row">
16                                <label
17                                    class="badge badge-secondary border border-2 border-secondary rounded-0 col-form-label col-5 font-1 color-1 d-flex align-items-center justify-content-center">作成日</label>
18                                <select name="sort" id="sort"
19                                    class="border border-2 border-secondary rounded-0 form-control form-control-sm col-7 font-1">
20                                    <option value="">全て</option>
21                                    <option value="created_at ASC" data-name="sort1">作成日 (昇順)</option>
22                                    <option value="created_at DESC" data-name="sort3">作成日 (降順)</option>
23                                </select>
24                            </div>
25                        </div>
26                        <div class="col-2">
27                            <div class="form-group row">
28                                <label
29                                    class="badge badge-secondary border border-2 border-secondary rounded-0 col-form-label col-5 font-1 color-1 rounded-0 align-middle d-flex align-items-center justify-content-center">作業種別</label>
30                                <select
31                                    class="form-control form-control-sm col-7 font-1 border border-2 border-secondary rounded-0"
32                                    name="">
33                                    <option value="">全て</option>
34                                    <option value="0">時間</option>
35                                </select>
36                            </div>
37                        </div>
38                        <div class="col-2">
39                            <div class="form-group row">
40                                <label
41                                    class="badge badge-secondary border border-2 border-secondary rounded-0 col-form-label col-5 font-1 color-1 rounded-0 align-middle d-flex align-items-center justify-content-center">期限</label>
42                                <select
43                                    class="form-control form-control-sm col-7 font-1 border border-2 border-secondary rounded-0"
44                                    name="">
45                                    <option value="">全て</option>
46                                </select>
47                            </div>
48                        </div>
49                        <div class="col-2">
50                            <div class="form-group row">
51                                <label
52                                    class="badge badge-secondary border border-2 border-secondary rounded-0 col-form-label col-5 font-1 color-1 rounded-0 d-flex align-items-center justify-content-center">Status</label>
53                                <select
54                                    class="form-control form-control-sm col-7 font-1 border border-2 border-secondary rounded-0"
55                                    name="" id="">
56                                    <option value="">全て</option>
57                                    <option value="0">準備中</option>
58                                    <option value="1">作業中</option>
59                                    <option value="2">納品済</option>
60                                    <option value="3">保留中</option>
61                                </select>
62                            </div>
63                        </div>
64                        <div class="col-2">
65                            <div class="form-group row">
66                                <label
67                                    class="badge badge-secondary border border-secondary rounded-0 col-form-label col-5 font-1 color-1 rounded-0 d-flex align-items-center justify-content-center">納品日</label>
68                                <select
69                                    class="form-control form-control-sm col-7 font-1 border border-2 border-secondary rounded-0"
70                                    name="">
71                                    <option value="">全て</option>
72                                </select>
73                            </div>
74                        </div>
75                        <div class="show-button-submit col-1" style="display: flex;">
76                            <button type="submit"
77                                class="btn btn-secondary font-1 border border-2 border-secondary rounded-3"
78                                style="height: 34px">検索</button>
79                        </div>
80                    </div>   
81                </div>
82            </form>
83        </section>
84

css
1
2/* 検索ボタン */
3.custom-switch {
4	padding-left: 2.25rem;
5}
6
7.switch-btn {
8	max-width: 8% !important;
9	padding-left: 3rem;
10}
11
12.custom-switch {
13	padding-left: 4rem;
14}
15
16.custom-control {
17	position: relative;
18	z-index: 1;
19	display: block;
20	min-height: 2rem;
21	padding-left: 3.5rem;
22}
23
24.custom-switch .custom-control-label::before {
25	left: -2.25rem;
26	width: 2.9rem;
27	pointer-events: all;
28	border-radius: 1rem;
29}
30.custom-control-label::before,
31.custom-file-label,
32.custom-select {
33	transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
34		box-shadow 0.15s ease-in-out;
35}
36.custom-control-label::before {
37	position: absolute;
38	top: 0.25rem;
39	left: -1.5rem;
40	display: block;
41	width: 2rem;
42	height: 1.75rem;
43	pointer-events: none;
44	content: "";
45	background-color: #fff;
46	border: #adb5bd solid 1px;
47}
48
49.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
50	background-color: #fff;
51	-webkit-transform: translateX(0.75rem);
52	transform: translateX(1.1rem);
53}
54
55.custom-switch .custom-control-label::after {
56	top: calc(0rem + 6px);
57	left: calc(-2.25rem + 2px);
58	width: calc(1.75rem - 4px);
59	height: calc(1.75rem - 4px);
60	background-color: #adb5bd;
61	border-radius: 1rem;
62	transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
63		box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
64	transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out,
65		border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
66	transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out,
67		border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out,
68		-webkit-transform 0.15s ease-in-out;
69}
70.custom-control-label::after {
71	position: absolute;
72	top: 0.25rem;
73	left: -1.5rem;
74	display: block;
75	width: 1rem;
76	height: 1rem;
77	content: "";
78	background: no-repeat 50%/50% 50%;
79}
80/* ここまで */
81
82.text-left {
83	padding: 0;
84}
85
86/* 検索欄調整 */
87.search-content {
88	margin-top: 1rem;
89	margin-right: 1rem;
90	margin-left: 1rem;
91}

試したこと

col-2をcol-3に変更をして、他の要素のcolを小さくして、rowが12になるように設定をしても、要素の幅自体が広くなりませんでした。

全体が左に寄ってしまっていることも何か関係があるのでしょうか・・。
お助けいただけますと幸いです。

m.ts10806

2021/04/19 10:55

自身でやってみたこと試したことそれにより起きている問題を具体的に記載してください。 https://teratail.com/help/question-tips#questionTips3-4 https://teratail.com/help/question-tips#questionTips3-5

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

回答1件

ベストアンサー

<div class="col-3 custom-control custom-switch custom-switch-radio-position switch-btn">
  <div class="row">
    <div class=" col-4"><input type="checkbox" class="custom-control-input" id="customSwitch1" data-toggle="collapse" data-target="#collapseExample" aria-expanded="true" aria-controls="collapseExample"></div>
    <div class=" col-8"><label class="custom-control-label text-left font-1" for="customSwitch1">検索ボタン</label></div>
  </div>
</div>

【ポイント】