Настройка ширины столбца начальной загрузки

Question

Я новичок в использовании Bootstrap.Я попытался отрегулировать 3-кулонный ряд, чтобы он соответствовал, с последним столбцом, разделенным на еще 3, но он перекрывается и с трудом заставляет его выглядеть правильно.

Мой cshtml для 1-го ряда:

 <div class="row">
        <div class="col-md-4 col-sm-4">
            <strong>Last Name</strong> <span class="required">*</span>
            @Html.TextBoxFor(m => m.Patient_Lastname, new { @class = "text-primary", required = "required" })
        </div>
        <div class="col-md-4 col-sm-4">
            <strong>First Name</strong> <span class="required">*</span>
            @Html.TextBoxFor(m => m.Patient_Firstname, new { @class = "text-primary", required = "required" })
        </div>
       <div class="col-md-1 col-sm-1">
            <strong>birth</strong> <span class="required">*</span>
            @Html.DropDownListFor(m => m.YearOfBirth, Enumerable.Range(1900, 119).Select(i => new SelectListItem { Value = i.ToString(), Text = i.ToString() }),
           "--Year--", new { @class = "form-control", style = "width: 90px; height:30px;", required = "required" })
        </div> 
        <div class="col-md-1 col-sm-1">
            <strong>Month</strong> <span class="required">*</span>
            @Html.DropDownListFor(m => m.YearOfBirth, Enumerable.Range(1, 12).Select(i => new SelectListItem { Value = i.ToString(), Text = i.ToString() }),
           "--Month--", new { @class = "form-control", style = "width: 90px; height:30px;", required = "required" })
        </div> 
        <div class="col-md-2 col-sm-2">
            <strong>Day</strong> <span class="required">*</span>
            @Html.DropDownListFor(m => m.YearOfBirth, Enumerable.Range(1, 31).Select(i => new SelectListItem { Value = i.ToString(), Text = i.ToString() }),
           "--Day--", new { @class = "form-control", style = "width: 80px; height:30px;", required = "required" })
        </div> 
    </div>

2-й и 3-й ряд прямо с col-md-4

Не могли бы вы помочь мне исправить это?

TIA Ron.

Answer 1

Я думаю, что проблема в том, что заполненная входная ширина больше доступной, попробуйте изменить ее размер.

Answer 2

Нет фиксированного макета, которому вы должны следовать, чтобы ваш экран автоматически выглядел красиво!Ваша работа состоит в том, чтобы попробовать и поэкспериментировать, что лучше всего соответствует вашим потребностям.

Очевидно, что col-sm-1 не может идеально соответствовать раскрывающемуся списку, поэтому вам нужно думать о разных макетах для разных точек останова.И bootstrap имеет множество хороших классов CSS , которые вы можете использовать "из коробки" уже для этой цели.

Extra Small Devices

Для очень маленьких устройств, вы все еще можете поместить год, месяц и день в одну строку.

Структура HTML

<form>
    <div class="form-row">
        <div class="form-group">Last Name Label & Input</div>
        <div class="form-group">First Name Label & Input</div>
        <div class="form-group">
            <div class="form-row">
                <div class="form-group col">Year Label & Input</div>
                <div class="form-group col">Month Label & Input</div>
                <div class="form-group col">Day Label & Input</div>
            </div>
        </div>
    </div>
</form>

Я использовал здесь .form-row вместо .row, потому что это даетВы более плотные желоба между колоннами..form-group используется, чтобы дать каждой группе ввода хороший margin-bottom.Использование .col дает вам автоматическую ширину .

Как это выглядит

Сейчасу вас есть макет, который работает для очень маленьких устройств.Вы как бы начинаете собираться из этого макета для каждого устройства с различными размерами экрана и добавить необходимых классов CSS.

Маленькие устройства

Для небольших устройств вам может потребоватьсяпоместить фамилию и ввод имени в виде 2 столбцов подряд.

Структура HTML

<form>
    <div class="form-row">
        <div class="form-group col-sm-6">Last Name Label & Input</div>
        <div class="form-group col-sm-6">First Name Label & Input</div>
        <div class="form-group col-sm-12">
            <div class="form-row">
                <div class="form-group col">Year Label & Input</div>
                <div class="form-group col">Month Label & Input</div>
                <div class="form-group col">Day Label & Input</div>
            </div>
        </div>
    </div>
</form>

Видите, какие классы .col-sm-* добавлены?

Как это выглядиткак

...

...

...

Очень большие устройства

Структура HTML

<form>
    <div class="form-row">
        <div class="form-group col-sm-6 col-xl-4">Last Name Label & Input</div>
        <div class="form-group col-sm-6 col-xl-4">First Name Label & Input</div>
        <div class="form-group col-sm-12 col-xl-4">
            <div class="form-row">
                <div class="form-group col">Year Label & Input</div>
                <div class="form-group col">Month Label & Input</div>
                <div class="form-group col">Day Label & Input</div>
            </div>
        </div>
    </div>
</form>

Как это выглядит