Элементы столбца bootstrap css не встроены

У меня есть этот html:

<div id = "table_filter" class = "dataTables_filter">
    <label>
        <div id = "datatable-search-input-container">
            <div class = "col-sm-3">
                <input type = "search" class = "datatable-search" placeholder = " Search" aria-controls = "table" id = "datatable-search-input">
            </div>
            <div class = "col-sm-3">
                <input type = "text" placeholder = "Search Name">
            </div>
            <div class = "col-sm-3">
                <input type = "text" placeholder = "Search UserName">
            </div>
            <div class = "col-sm-3">
                <input type = "text" placeholder = "Search Email">
            </div>
            <div class = "col-sm-3">
                <input type = "text" placeholder = "Search Phone Number">
            </div>
        </div>
        <div class = "col-sm-12 clearfix" id = "datatable-controls">
            <div class = "pull-right">
                <span class = "datatable-control-item">
                    <button type = "button" class = "btn btn-primary" id = "searchButton">Search</button>
                </span>
                <span class = "datatable-control-item">
                    <button type = "button" class = "btn btn-outline-secondary" id = "resetButton">Reset</button>
                </span>
            </div>
        </div>
    </label>
</div>

Он генерирует такую функцию поиска:

Если вы посмотрите на изображение, по какой-то причине мои столбцы col-sm-3 занимают всю строку вместо того, чтобы быть встроенными. Я проверил CSS, и ничего не перезаписывает ширину.

html css twitter-bootstrap

27.10.2018 09:20

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

330

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

Ответы 1

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

Вам нужно будет обернуть свои классы col-sm в класс row. Нравится

<div id = "table_filter" class = "dataTables_filter">
  <label>
        <div id = "datatable-search-input-container" class = "row">
            <div class = "col-sm-3">
                <input type = "search" class = "datatable-search" placeholder = " Search" aria-controls = "table" id = "datatable-search-input">
            </div>
            <div class = "col-sm-3">
                <input type = "text" placeholder = "Search Name">
            </div>
            <div class = "col-sm-3">
                <input type = "text" placeholder = "Search UserName">
            </div>
            <div class = "col-sm-3">
                <input type = "text" placeholder = "Search Email">
            </div>
            <div class = "col-sm-3">
                <input type = "text" placeholder = "Search Phone Number">
            </div>
        </div>
        <div class = "row">
            <div class = "col-sm-12 clearfix" id = "datatable-controls">
                <div class = "pull-right">
                    <span class = "datatable-control-item">
                        <button type = "button" class = "btn btn-primary" id = "searchButton">Search</button>
                    </span>
                    <span class = "datatable-control-item">
                        <button type = "button" class = "btn btn-outline-secondary" id = "resetButton">Reset</button>
                    </span>
                </div>
            </div>
        </div>
    </label>
</div>

Если вы используете Bootstrap 4 (как кажется) и хотите, чтобы все столбцы имели одинаковый размер, вам также не нужно указывать номер, поэтому вы можете просто использовать col-sm.

Спасибо! Есть ли способ обеспечить равномерное распределение всех входных данных? Похоже, что в объявлениях col-sm есть отступ, который слишком сильно разносит все

— 27.10.2018 09:57

Это может быть связано с тем, что вы используете col-sm-3, поэтому ожидается, что блоки займут 12/3 = 25% всего пространства. Bootstrap основан на системе из 12 столбцов. Но немного просмотрите их документацию, вы найдете там много помощи: getbootstrap.com/docs/4.1/layout/grid

— 27.10.2018 10:03

27.10.2018 09:39