第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

垂直對齊不適用于自定義控件

垂直對齊不適用于自定義控件

慕勒3428872 2023-10-24 20:37:39
我正在嘗試構(gòu)建一個具有自定義控制元素的簡單過濾器欄。該元素應(yīng)該垂直對齊,但它似乎不起作用。這是過濾欄的標(biāo)記:<div class="bg-light p-3 card">    <form class="form-inline">        <div class="form-row">            <div class="col-auto">                <input type="text" placeholder="The team's name" class="form-control" value="" />            </div>            <div class="col-auto">                <select class="form-control">                    <option value="">Select the season</option>                    <option value="2019">2019</option>                    <option value="2020">2020</option>                </select>            </div>            <div class="col-auto">                <button type="submit" class="btn btn-secondary">                    <i class="fas fa-search"/>&nbsp;Search</button>            </div>            <div class="col-auto">                <div class="custom-control custom-switch align-center">                    <input type="checkbox" class="custom-control-input" id="vpx" checked="" />                    <label class="custom-control-label" for="vpx">Hide 0-point teams</label>                </div>            </div>        </div>    </form></div>但結(jié)果如下圖所示:無論align-我添加哪個類,該元素都不會移動一點(diǎn)。已嘗試將該display屬性設(shè)置inline-block為 bootstap-docs 中所述。實(shí)現(xiàn)居中之類的唯一方法是添加mt-2類,但這似乎不是正確的方法。
查看完整描述

1 回答

?
牛魔王的故事

TA貢獻(xiàn)1830條經(jīng)驗(yàn) 獲得超3個贊

align-items-center在“搜索”按鈕上添加form-row并正確關(guān)閉標(biāo)簽<i>


body{ min-width: 800px;}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="bg-light p-3 card">

    <form class="form-inline">

        <div class="form-row align-items-center">

            <div class="col-auto">

                <input type="text" placeholder="The team's name" class="form-control" value="" />

            </div>

            <div class="col-auto">

                <select class="form-control">

                    <option value="">Select the season</option>

                    <option value="2019">2019</option>

                    <option value="2020">2020</option>

                </select>

            </div>

            <div class="col-auto">

                <button type="submit" class="btn btn-secondary">

                    <i class="fas fa-search">&nbsp;Search</i></button>

            </div>

            <div class="col-auto">

                <div class="custom-control custom-switch align-center">

                    <input type="checkbox" class="custom-control-input" id="vpx" checked="" />

                    <label class="custom-control-label" for="vpx">Hide 0-point teams</label>

                </div>

            </div>

        </div>

    </form>

</div>


查看完整回答
反對 回復(fù) 2023-10-24
  • 1 回答
  • 0 關(guān)注
  • 132 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號