Блог

Главная - Вопросы по программированию - Настройка кнопки загрузки находится в одной колонке с другой кнопкой загрузки?

Настройка кнопки загрузки находится в одной колонке с другой кнопкой загрузки?

#html #css

Вопрос:

У меня есть полная страница списка для загрузки документа. Но моя страница загрузки документов выглядит беспорядочно, а кнопка загрузки неорганизованна.

Я хочу создать страницу, на которой все upload кнопки будут располагаться в одном столбце. Я попытался вставить кнопку в другую <div> , но кнопка перешла на следующую строку.

Как мне добиться такого результата ?

 Copy of Latest Certificate ARDSFGH                  Upload
Copy of Individual Identification Card/Passport     Upload

 
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

 <div class="card-body">
        <div class="row">
            <div class="col-lg-10 mb-30">
                <label><b><span style="color:#e60000;">*</span> Copy of Latest Certificate ARDSFGH</b></label>
                    <button type="button" class="btn btn-info w-30 choose_attachment">Upload</button>
                    <input type="file" id="attachment1" hidden>
                        <div class="tab-content col-12" id="myTabContent-2">
                            <div class="tab-pane fade show active" id="addCustodian" role="tabpanel" aria-labelledby="addCustodian-tab">
                                <div id="choose1" class="row p-1"></div>    
                            </div>
                        </div>
            </div>
        </div> 
        <div class="row">
            <div class="col-lg-10 mb-30">
                <label><b><span style="color:#e60000;">*</span> Copy of Individual Identification Card/Passport</b></label>
                    <button type="button" class="btn btn-info w-30 choose_attachment2">Upload</button>
                    <input type="file" id="attachment2" hidden>
                        <div class="tab-content col-12" id="myTabContent-2">
                            <div class="tab-pane fade show active" id="addCustodian" role="tabpanel" aria-labelledby="addCustodian-tab">
                                <div id="choose2" class="row p-1"></div>    
                            </div>
                        </div>
            </div>
        </div>

Ответ №1:

вы можете добавить еще один col, чтобы установить кнопки загрузки в том же положении

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

 <div class="card-body">
        <div class="row">
            <div class="col-sm-8 mb-30">
                <label><b><span style="color:#e60000;">*</span> Copy of Latest Certificate ARDSFGH</b></label>
                  
               </div>
             <div class="col-sm-3 text-left">
                 <button type="button" class="btn btn-info w-30 choose_attachment">Upload</button>
                    <input type="file" id="attachment1" hidden>
                        <div class="tab-content col-12" id="myTabContent-2">
                            <div class="tab-pane fade show active" id="addCustodian" role="tabpanel" aria-labelledby="addCustodian-tab">
                                <div id="choose1" class="row p-1"></div>    
                            </div>
             </div>
            </div>
        </div> 
        <div class="row">
            <div class="col-sm-8 mb-30">
                <label><b><span style="color:#e60000;">*</span> Copy of Individual Identification Card/Passport</b></label>
                  
            </div>
          <div class="col-sm-3 text-left">
             <button type="button" class="btn btn-info w-30 choose_attachment2">Upload</button>
                    <input type="file" id="attachment2" hidden>
                        <div class="tab-content col-12" id="myTabContent-2">
                            <div class="tab-pane fade show active" id="addCustodian" role="tabpanel" aria-labelledby="addCustodian-tab">
                                <div id="choose2" class="row p-1"></div>    
                            </div>
                        </div>
          </div>
        </div>
Метки: