Я все еще новичок в начальной загрузке, а также HTML / CSS в этом. То, что я пытаюсь сделать, это выровнять входы в одной строке, я посмотрел совет и поместил его в контейнер, но эти два входа все еще отображаются в разных строках.

HTML

        <div class="container">
            <div class="row">  
                <div class="col-md">
                    <h3>Startdate From:</h3>
                    <input name="stardatefromDTP" type="date" />
                 </div> 
                <div class="col-md">
                    <h3>Startdate To:</h3>
                    <input name="stardatetoDTP" type="date" />
               </div>
            </div>
        </div>

Кто-нибудь может мне помочь с этим?

0
JonJames 28 Фев 2020 в 03:40

2 ответа

Лучший ответ

Это будет работать, хотя вам нужно будет возиться с размерами столбцов, чтобы получить форматирование именно так, как вам бы хотелось:

<div class="container">
<div class="row">  
    <div class="col-md">
        <div class="row">
            <div class="col">
                <h3>Startdate From:</h3>
            </div>
            <div class="col">
                <input name="stardatefromDTP" type="date" />
            </div>
        </div>
    </div>
    <div class="col-md">
        <div class="row">
            <div class="col">
                <h3>Startdate To:</h3>
            </div>
            <div class="col">
                <input name="stardatetoDTP" type="date" />
            </div>
        </div>
    </div>  
</div> 

В качестве альтернативы вы можете использовать элемент label вместо:

<label class="h3" for="startdate">Startdate From:</label>
<input type="date" class="form-control" id="startdate" />
0
scottapotamus 28 Фев 2020 в 01:04

Я считаю, что h3 является блочным элементом, поэтому col-md будет растягиваться для размещения. Попробуйте col-md-6, чтобы заставить его быть меньше. Классы col ссылаются на столбцы, а bootstrap делит экран на 12, поэтому col-md-6 должен освободить место для 2 входов в 1 строке.

0
Sydney Y 28 Фев 2020 в 00:53