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

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

如何在引導(dǎo)程序中對(duì)齊標(biāo)簽下方的按鈕元素

如何在引導(dǎo)程序中對(duì)齊標(biāo)簽下方的按鈕元素

蠱毒傳說(shuō) 2024-01-11 17:05:09
因此，我正在創(chuàng)建一個(gè)表單，其中卡片中有一個(gè)上傳按鈕。結(jié)果是<label>和圖像正確對(duì)齊，但該<button>元素未顯示在標(biāo)簽下方。我什至嘗試使用諸如此類(lèi)的引導(dǎo)類(lèi)ml-5，但它仍然不起作用。我希望將按鈕放置在標(biāo)簽下方，但問(wèn)題是：它位于同一行，如圖所示：我希望它看起來(lái)像這樣：有什么辦法可以將按鈕對(duì)齊標(biāo)簽下方。它應(yīng)該類(lèi)似于上圖。代碼：.img-wrapper {    display: block;    width: 6.4rem;    line-height: 15px;    margin-left: 6rem;    float: right;}.img-wrapper img {    display: inline;    border-radius: 50%;}<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"        crossorigin="anonymous"></head><body><div class="card bg-light mb-3">                                <div class="card-body">                                    <label for="profile">Upload a Profile image:</label>                                    <button type="button" class="btn btn-primary d-inline" id="upload">Upload</button>                                    <input type="file" name="profile" id="profile" hidden=""/>                                    <div class="img-wrapper">                                        <img class="float-right" src="https://i.imgur.com/yPOQLQh.png" alt="Profile" width="100" height="100"/>                                    </div>                                </div>                            </div><script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script><!-- Bootstrap.js --><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script></body></html>
查看完整描述

4 回答

?
弒天下

TA貢獻(xiàn)1818條經(jīng)驗(yàn) 獲得超8個(gè)贊

您可以使用此代碼：


.img-wrapper {

    display: block;

    width: 6.4rem;

    line-height: 15px;

    margin-left: 6rem;

    float: right;

}


.img-wrapper img {

    display: inline;

    border-radius: 50%;

}

.card-body{

    display: flex;

    justify-content: space-between;

}

.card-content{

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"        crossorigin="anonymous">

</head>

<body>


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

                                <div class="card-body">

                                    <div class="card-content">

                                    <label for="profile">Upload a Profile image:</label>

                                    <button type="button" class="btn btn-primary d-inline" id="upload">Upload</button>

                                        </div>

                                    <input type="file" name="profile" id="profile" hidden=""/>

                                    <div class="img-wrapper">

                                        <img class="float-right" src="https://i.imgur.com/yPOQLQh.png" alt="Profile" width="100" height="100"/>

                                    </div>

                                </div>

                            </div>


<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

<!-- Bootstrap.js -->

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>


</body>

</html>


查看完整回答
反對(duì) 回復(fù) 2024-01-11
?
RISEBY

TA貢獻(xiàn)1856條經(jīng)驗(yàn) 獲得超5個(gè)贊

由于您正在使用 bootstrap，因此您可以很容易地做到這一點(diǎn)。讓我向您展示它是如何工作的：


      <div class="row">

        <div class="col-8 col-md-8 col-sm-8 col-lg-8"> // here you can specify cols on your own

          <div class="row">

              //your label and ll go here

          </div>

          <div class="row">

            //button ll go here

            //it ll create a new line but within this parent div

          </div>

        </div>

        <div class="col-4 col-md-4 col-sm-4 col-lg-4">

          // your image code ll go here

        </div>

      </div>

它會(huì)在標(biāo)簽底部為您提供按鈕，并且圖像將像以前一樣放置，僅使用標(biāo)準(zhǔn) bootstrap 4 類(lèi)...


謝謝你！快樂(lè)編碼??！


查看完整回答
反對(duì) 回復(fù) 2024-01-11
?
浮云間

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超4個(gè)贊

您可以將按鈕類(lèi)從 d-inline 更改為 d-block 并放在<div class="img-wrapper">其前面。


<label for="profile">Upload a Profile image:</label>

<div class="img-wrapper">

    <img class="float-right" src="https://i.imgur.com/yPOQLQh.png" alt="Profile" width="100" height="100"/>

</div>  

<button type="button" class="btn btn-primary d-block" id="upload">Upload</button>

<input type="file" name="profile" id="profile" hidden=""/>


查看完整回答
反對(duì) 回復(fù) 2024-01-11
?
Helenr

TA貢獻(xiàn)1780條經(jīng)驗(yàn) 獲得超4個(gè)贊

將這些元素包裝在 div 中：


<div style="display: inline-block">

  <label for="profile">Upload a Profile image:</label>

  <button type="button" class="btn btn-primary d-inline" id="upload">Upload</button>

</div>

并將 display: inline-block 添加到您的按鈕。


.d-inline {

  display: inline-block;

}


查看完整回答
反對(duì) 回復(fù) 2024-01-11
  • 4 回答
  • 0 關(guān)注
  • 232 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

 幫助反饋 APP下載

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

 公眾號(hào)

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