Блог

Главная - Вопросы по программированию - Сделать текст и выпадающий список встроенными вместе bootstrap

Сделать текст и выпадающий список встроенными вместе bootstrap

#html

#HTML

Вопрос:

Текст и выпадающий список не являются аккуратнымия пытаюсь объединить текст и выпадающий список в одной строке. Однако, когда я добавляю выпадающий список, положение текста меняется, и это выглядит странно. Кто-нибудь, помогите мне, пожалуйста. 

  <div class="row">
      Sort By: 
<select    name="services" class=' col-md-4 form-control' id="services" >
<option value ="none">Nothing</option>
<option value ="guava">Guava</option>
<option value ="lychee">Lychee</option>
<option value ="papaya">Papaya</option>
</select>
   </div>

Комментарии:

1. нужно больше деталей?

2. Если вы хотите повлиять на то, как оформляются элементы, вам следует заглянуть в CSS. Кроме того, вам следует отредактировать свой вопрос, чтобы включить результат, которого вы пытаетесь достичь. Сказать, что это «выглядит странно», недостаточно, чтобы уйти. Как это должно выглядеть?

Ответ №1:

Для этого вы можете использовать select multiple, если вы не хотите разрешать множественный выбор, вы можете исправить js, чтобы выбрать только 1 вариант

 #services
{
  width: 220px;
  height: 24px;
}
#services option
{
  display: inline-block;
}  
 <div class="row">
      Sort By: 
<select  multiple  name="services" class=' col-md-4 form-control' id="services" >
<option value ="none">Nothing</option>
<option value ="guava">Guava</option>
<option value ="lychee">Lychee</option>
<option value ="papaya">Papaya</option>
</select>
   </div>

Ответ №2:

Вы, вероятно, имеете в виду тот факт, что они неправильно выровнены по вертикали. Это можно легко решить, убедившись, что у вас есть как для списка, так и для метки: vertical-align: (middle or top) в зависимости от ваших потребностей.

Ответ №3:

Я думаю, что вам нужен только my-auto класс bootstrap для выравнивания по вертикали.
Попробуйте это:

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-auto my-auto">
      Sort By:
    </div>
    <div class="col">
      <select name="services"
              class='form-control'
              id="services">
        <option value="none">Nothing</option>
        <option value="guava">Guava</option>
        <option value="lychee">Lychee</option>
        <option value="papaya">Papaya</option>
      </select>
    </div>
  </div>
</div>

PS Также при использовании bootstrap всегда помещайте свой контент в col -s вместо row -s. как говорится в документации:

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