Настройка ширины столбца Bootstrap

Я новичок в использовании Bootstrap. Я попытался настроить ряд из трех столбцов, чтобы он соответствовал последнему столбцу, разделенному еще на 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

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

ТИА Рон.

В любом случае, вы можете просто опубликовать HTML?

— 30.05.2019 23:31

Проблема решается сама собой, если вы увеличиваете окно? Если это так, то это просто означает, что один из этих элементов слишком велик для непрерывного потока, и поэтому что-то должно быть изменено. Имейте в виду, что ваши строки будут иметь отступы (поле -15), а столбцы по умолчанию будут иметь отступы 10 пикселей. Вы можете попытаться уменьшить это дополнение, чтобы решить проблему. Кроме того, не уверен, что это поможет, но обычно, когда я хочу создать макет, подобный вашему, я стараюсь использовать классы form-row class и form-group вместо просто row и col.

— 30.05.2019 23:45

css razor bootstrap-4

30.05.2019 23:25

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

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

затем вся страница для столбца ширины ввода изменяется, что выглядит более беспорядочно.

— 30.05.2019 23:42

30.05.2019 23:32

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

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

Очень маленькие устройства

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

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.

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

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

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>