質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

bootstrap flexの幅指定が効かない

sanayaaan
sanayaaan

総合スコア25

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1回答

0グッド

0クリップ

714閲覧

投稿2021/04/19 10:50

編集2021/04/19 13:42

前提・実現したいこと

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

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

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

ベストアンサー

<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>

【ポイント】

  • 入れ子構造が不適切
  • インライン要素(今回は input)に直接カラム指定はできない

投稿2021/04/19 22:24

takna

総合スコア784

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

sanayaaan

2021/04/24 07:10

ありがとうございました。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。