Интересно, как реализовать метку группы ввода Bootstrap4 между двумя полями ввода. Есть стили "добавить" и "добавить", но в этом случае ... не знаю, как его назвать ... стиль "центр" необходим. Я что-то упускаю?

enter image description here

Углы элемента не должны закругляться - это визуальное требование. Мы должны решить проблему полностью, используя только предопределенные классы и стили bs4, ни один элемент local style = "..." не включен. Кто-нибудь знает решение? Спасибо!

        

<div class="form-group col-6">
   <div class="input-group">
     <div class="input-group-prepend">
       <span class="input-group-text">Date interval:</span>
     </div>
     <input type="text" class="form-control" name="dateFrom" placeholder="YYYY-MM-DD" value="2020-05-19">
     <span class="input-group-text">-</span>
     <input type="text" class="form-control" name="dateTo" placeholder="YYYY-MM-DD" value="2020-06-19">
  </div>
</div>
0
Zoltan Hernyak 19 Июн 2020 в 10:41

1 ответ

Лучший ответ

Bootstrap предоставляет граничные классы .

Закругленные края вызывает свойство CSS под названием border-radius.

Наиболее подходящими для вас граничными классами Bootstrap будут следующие:

  1. rounded-left (закругляет левые углы)
  2. rounded-0 (равно border-radius: 0px; - т.е. без закругленных углов)
  3. rounded-right (закругляет правые боковые углы)

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

Подробнее о граничных классах Bootstrap здесь.

Пример фрагмента:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group col-10">
   <div class="input-group">
     <div class="input-group-prepend">
       <span class="input-group-text rounded-left">Date interval:</span>
     </div>
     <input type="text" class="form-control rounded-0" name="dateFrom" placeholder="YYYY-MM-DD" value="2020-05-19">
     <span class="input-group-text rounded-0">-</span>
     <input type="text" class="form-control rounded-right" name="dateTo" placeholder="YYYY-MM-DD" value="2020-06-19">
  </div>
</div>

Пример Codepen здесь.

1
Martin 19 Июн 2020 в 08:01