Стили формы HTML Bootstrap

как я могу сделать так, чтобы в этом списке отображались кнопки над текстовыми полями? как в

код:

 <form id = "Data" runat = "server" class = "p-3 mb-2 bg-primary text-dark">
     <div class = "form-group col">
        <label for = "Countries" class = "control-label">Email address</label>
            <asp:DropDownList name = "Countries" ID = "Countries" runat = "server" AppendDataBoundItems = "true" OnSelectedIndexChanged = "Countries_Selected">
            <asp:ListItem Text = "<Seleccione país>" Value = "0" />
            </asp:DropDownList>
     </div>
     <div class = "form-group col">
        <label for = "DateIn" class = "control-label">Email address</label>
            <asp:Textbox runat = "server" TextMode = "Date" name = "DateIn" ID = "DateIn" Text = "Seleccione Fecha Devolucion">
            </asp:Textbox>
     </div>

     <div class = "form-group col">
        <label for = "DateOut" class = "control-label">Email address</label>
            <asp:Textbox runat = "server" TextMode = "Date" name = "DateOut" ID = "DateOut" Text = "Seleccione Fecha Retiro">
            </asp:Textbox>
     </div>

     <div class = "form-group col">
        <label for = "smth" class = "control-label">Email address</label>
            <asp:DropDownList name = "smth" ID = "smth" runat = "server" AppendDataBoundItems = "true" OnSelectedIndexChanged = "Countries_Selected">
                <asp:ListItem Text = "<Seleccione país>" Value = "0" />
            </asp:DropDownList>
     </div>

    </form>

В настоящее время моя страница выглядит так:

Текущий стиль

В Bootstrap 4 нет col-xs, это просто col.

— 18.05.2018 21:09

Полагаю, col-md тоже ничего не делает?

— 18.05.2018 21:28

col-md действителен, см .: getbootstrap.com/docs/4.1/layout/grid/#grid-options

— 18.05.2018 22:42

html css asp.net bootstrap-4

18.05.2018 20:15

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

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

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

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

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

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

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

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

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

428

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

Ответы 2

Вы можете использовать display: flex для получения макета. Вам нужно будет сделать больше настроек, чтобы входные данные соответствовали стилю.

Я сделал два вспомогательных класса: columns и col.

columns - это контейнерный div с display: flex. col - это каждый столбец в div с flex: 1, что означает, что они будут равномерно распределены внутри контейнера.

form {
  width: 400px;
  background: #278339;
  color: #FFF;
  padding: 20px;
}

input,
select {
  width: 100%;
  margin-bottom: 10px;
}

.columns {
  display: flex;
}

.col {
  flex: 1;
  margin-right: 15px;
}

<form id = "Data" runat = "server" class = "p-3 mb-2 bg-primary text-dark">

  <div class = "columns">

    <div class = "col">

      <div class = "form-group col-xs-4 col-md-4">
        <label for = "DateIn" class = "control-label">Fecha y Horario regreso</label>
        <input runat = "server" TextMode = "Date" name = "DateIn" ID = "DateIn" Text = "Seleccione Fecha Devolucion">
        </input>
      </div>

      <div class = "columns">

        <div class = "col">
          <div class = "form-group col-xs-4 col-md-4">
            <select name = "Countries" ID = "Countries" runat = "server" AppendDataBoundItems = "true" OnSelectedIndexChanged = "Countries_Selected">
              <option Text = "<Seleccione país>" Value = "0" />
            </select>
          </div>
        </div>

        <div class = "col">

          <div class = "form-group col-xs-4 col-md-4">
            <select name = "Countries" ID = "Countries" runat = "server" AppendDataBoundItems = "true" OnSelectedIndexChanged = "Countries_Selected">
              <option Text = "<Seleccione país>" Value = "0" />
            </select>
          </div>
        </div>
      </div>

    </div>


    <div class = "col">
      <div class = "form-group col-xs-4 col-md-4">
        <label for = "Countries" class = "control-label">Categorias:</label>
        <select name = "Countries" ID = "Countries" runat = "server" AppendDataBoundItems = "true" OnSelectedIndexChanged = "Countries_Selected">
          <option Text = "<Seleccione país>" Value = "0" />
        </select>
      </div>
    </div>

  </div>


</form>

Извините, я полный нуб относительно CSS, кажется, класс col уже создан в начальной загрузке 4, это будет проблемой? если я создам это снова?

— 18.05.2018 21:04

@GonzaloIgnacioVeraPortilla Да, тогда вы должны изменить имя на my-col или другое уникальное имя, имя класса может быть любым.

— 18.05.2018 21:16

@mahan Где твой ответ?

— 18.05.2018 21:17

@mahan Я бы сказал то же самое, ваш комментарий совсем не помогает с проблемой, если вы хотите указать на ошибку в чьем-то ответе, пожалуйста, укажите детали и альтернативное решение

— 18.05.2018 21:21

18.05.2018 20:27

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

Используйте два rows, один с двумя col-6 и один с двумя col-3. Я использовал только один встроенный стиль CSS. В этом нет необходимости, если форма находится внутри другого элемента того же размера. В противном случае измените его на то число, которое соответствует вашему дизайну.

    <link href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel = "stylesheet" />
    <form class = "bg-success p-4 text-white mx-auto" style = "width:500px">
      <div class = "row">
        <div class = "col-6 d-flex flex-column">
          <label for = "DateIn">Fecha y Horario regreso</label>
          <input class = "form-control" />
        </div>
        <div class = "col-6 d-flex flex-column">
          <label for = "Countries"> Categorias:</label>
          <select class = "form-control">
            <option value = "">one</option>
            <option value = "">two</option>
            <option value = "">three</option>
          </select>
        </div>
      </div>
      <div class = "row mt-4">
        <div class = "col-3">
          <select class = "form-control">
            <option value = "">one</option>
            <option value = "">two</option>
            <option value = "">three</option>
          </select>
        </div>
        <div class = "col-3">
          <select class = "form-control">
            <option value = "">one</option>
            <option value = "">two</option>
            <option value = "">three</option>
          </select>
        </div>
      </div>
    </form>

Обновлять

Следуй этим шагам

составить ряд
col-6 для двух первых столбцов
col break, чтобы заставить последние два столбца перейти на новую строку
col-3 для последней буксировки columns

<link href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel = "stylesheet" />
<form class = "row bg-success p-4 text-white mx-auto" style = "width: 500px;">
  <div class = "col-6 d-flex flex-column">
    <label for = "DateIn">Fecha y Horario regreso</label>
    <input class = "form-control radius-0">
  </div>
  <div class = "col-6 d-flex flex-column">
    <label for = "Countries"> Categorias:</label>
    <select class = "form-control radius-0">
      <option value = "">one</option>
      <option value = "">two</option>
      <option value = "">three</option>
    </select>
  </div>
  <!-- Force next columns to break to new line at md breakpoint and up -->
  <div class = "w-100 d-none d-md-block my-3"></div>
  <div class = "col-3">
    <select class = "form-control radius-0">
      <option value = "">one</option>
      <option value = "">two</option>
      <option value = "">three</option>
    </select>
  </div>
  <div class = "col-3">
    <select class = "form-control radius-0">
      <option value = "">one</option>
      <option value = "">two</option>
      <option value = "">three</option>
    </select>
  </div>
</form>