Почему Bootstrap не позволяет мне устанавливать поля в раскрывающихся списках на странице ASP.NET MVC? - PullRequest
Новая
       29

Почему Bootstrap не позволяет мне устанавливать поля в раскрывающихся списках на странице ASP.NET MVC?

0 голосов
/ 14 ноября 2018

У меня возникли проблемы с Bootstrap / CSS в моем приложении ASP.NET MVC. У меня есть «группа форм» с меткой слева и вертикальным стеком выпадающих меню справа.

Теперь я настроил все так, как хочу, за исключением полей. В настоящее время их нет. Похоже, поля, которые я даю, не эффективны. Я в значительной степени взял это из видеоуроки на YouTube. Я не понимаю, почему это не работает.

Я пробовал все виды вещей, mb-4, mt-4, my-4, ...

Что я здесь не так делаю? Я проверил, я использую bootstrap v3.3.7.

Это мой код: 

<div class="form-group">
    @Html.LabelFor(model => model.SelectedTags, htmlAttributes: new { @class = "control-label col-md-2", id = "lblSelectedTags" })
    <div class="col-md-10">
            @Html.DropDownListFor(model => model.Tag1, Model.AvailableTags, htmlAttributes: new { @class = "form-control mb-4", id = "ddlTag1" })
            @Html.DropDownListFor(model => model.Tag2, Model.AvailableTags, htmlAttributes: new { @class = "form-control mb-4", id = "ddlTag2" })
            @Html.DropDownListFor(model => model.Tag3, Model.AvailableTags, htmlAttributes: new { @class = "form-control mb-4", id = "ddlTag3" })
    </div>
</div>
<div class="form-group">
    @Html.LabelFor(model => model.FriendlyName, htmlAttributes: new { @class = "control-label col-md-2", id = "lblFriendlyName" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.FriendlyName, new { htmlAttributes = new { @class = "form-control", id = "edrFriendlyName" } })
        @Html.ValidationMessageFor(model => model.FriendlyName, "", new { @class = "text-danger" })
    </div>
</div>

И вот результат:

enter image description here

Ответы [ 3 ]

0 голосов
/ 14 ноября 2018

bootstrap 4 позволяет использовать теги padding и margin:

  • MT-1 (поле сверху), mb-1 (поле снизу), MR-1 (поле справа), мл-1 (поле слева) может изменить число от 1 до 5 в зависимости от ваших потребностей или замените М на р (заполнение)

как для начальной загрузки 3 вам нужно будет использовать css 

.form-group{
margin-bottom:10px;
}

например

0 голосов
/ 14 ноября 2018

После продолжительных итераций бесконечного цикла проб и ошибок я понял, что способ, которым ASP.NET собирает html и стили, не достаточно прост, чтобы его можно было легко понять для новичка в этой технологии. Надеюсь, это может измениться через некоторое время.

Так что я наткнулся на этот другой пост ( Не могу установить правильное поле с помощью начальной загрузки CSS в MVC ), где у кого-то еще были проблемы с полями в ASP.NET. Это, вероятно, не правильный способ делать вещи, но для меня и на данный момент это работает. Я в основном избегал добавлять в свой файл CSS что-то вроде этого

.mb-4 { нижнее поле: 1.5em! важно; }

и вместо этого добавил его в коллекцию htmlAttributes вспомогательного класса Html для каждого из моих элементов управления, например:

@Html.DropDownListFor (model => model.Tag1, Model.AvailableTags, htmlAttributes: new {@class = "form-control", style = "margin-bottom: 1.5em! Важный;", id = "ddlTag1 "})

0 голосов
/ 14 ноября 2018

Вы используете загрузчик 3 и в этой версии sapcing недоступен

Таким образом, вы можете имитировать поведение начальной загрузки версии 4, создав этот класс в css

Например, я инициировал поведение mb-4, добавив в css .mb-4 { margin-bottom: 1.5em; }:

ПРИМЕЧАНИЕ!

  • В Razor: используйте тот же код в HTML, что и вы, но добавьте правило css
  • Я использую em в css только для запуска начальной загрузки, но вы можете использовать px как хотите 

.mb-4 { margin-bottom: 1.5em; }
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
<div class="form-group">
    <label class = "control-label col-md-2" id ="lblSelectedTags">drop down</label> 
    <div class="col-md-10">
            <div class = "form-control mb-4" id = "ddlTag1">
            ddlTag1
            </div>
            <div class = "form-control mb-4" id = "ddlTag2">
            ddlTag2
            </div>
             <div class = "form-control mb-4" id = "ddlTag3">
            ddlTag3
            </div>
           
    </div>
</div>
...