Bootstrap - встроенные формы отображаются неправильно

У меня есть форма, в которой есть 2 text и 1 button, чтобы пользователь мог вводить дату поиска, и мне нужно, чтобы она отображалась в строке. Я использовал <form class = "form-inline">, но он все еще не работает. Это выглядит так: Bootstrap - встроенные формы отображаются неправильно

<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class = "pull-right">
  <form class = "form-inline" role = "search" action = "<?php echo base_url('report/searchDate')?>" method = "post">
    <div class = "input-group">
      <input type = "text" class = "form-control" placeholder = "Date From" name = "searchDateFrom" size = "10px; ">
      <input type = "text" class = "form-control" placeholder = "Date To" name = "searchDateTo" size = "10px; ">
      <div class = "input-group-btn">
        <button class = "btn btn-default " type = "submit" value = "searchDateTo"><i class = "glyphicon glyphicon-search"></i></button>
      </div>
    </div>
  </form>
</div>

Вы уверены, что используете Bootstrap 4? Разметка выглядит как Bootstrap 3. В Bootstrap 3 нет ни pull-right, ни input-group-addon, ни btn-default.

— 05.09.2018 12:36

html bootstrap-4

05.09.2018 05:02

Улучшение производительности загрузки с помощью 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 страниц, которые помогут...

Ответы 1

Используйте класс input-daterange

<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class = "input-group input-daterange">
    <input type = "text" class = "form-control" value = "2012-04-05">
    <div class = "input-group-addon">to</div>
    <input type = "text" class = "form-control" value = "2012-04-19">
</div>

Для получения дополнительной информации: https://bootstrap-datepicker.readthedocs.io/en/latest/markup.html#date-range

05.09.2018 06:05