Bootstrap 4 - Отрегулируйте ширину поля ввода

Используя этот стартовый шаблон, как я могу контролировать ширину ввода?

https://getbootstrap.com/docs/4.1/examples/starter-template/

Это та часть, которую я хотел бы уменьшить

<form class = "form-inline my-2 my-lg-0">
  <input class = "form-control mr-sm-2" type = "text" placeholder = "Search" aria-label = "Search">
  <button class = "btn btn-outline-success my-2 my-sm-0" type = "submit">Search</button>
</form>

Я попытался обернуть ввод в div <div class = "col-xs-2">, но это ничего не дало. Какие у меня есть альтернативы?

Похоже, вы редактируете поле поиска на панели навигации. Взгляните на это: stackoverflow.com/questions/50750931/…stackoverflow.com/questions/41574776/…getbootstrap.com/docs/4.1/utilities/spacing

— 27.10.2018 17:49

css bootstrap-4

27.10.2018 17:30

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

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

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

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

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

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

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

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

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

7 732

Ответы 3

вы можете сделать это в файле css, выполнив:

Код CSS для помещения в файл css или в тег стиля

input{
   width:50px;
}

это изменит ширину всех элементов управления вводом, если вы хотите изменить ширину определенного поля ввода, чем назначить этому полю свой собственный класс или идентификатор, а затем использовать этот идентификатор / класс для изменения ширины

— 27.10.2018 17:51

27.10.2018 17:45

Решение 1: укажите "max-width" для вашего элемента ввода:

input[type=text] {
  max-width: 200px;
}

input[type=button] {
  max-width: 100px;
}

<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel = "stylesheet" />


<input type = "text" name = "search" id = "search" value = "test" placeholder = "Search accounts, contracts and transactions" class = "form-control">

<input type = "button" name = "commit" value = "Search" class = "btn btn-primary btn-block">
</div>

Решение 2: Или попробуйте добавить классы col- * в select и input.

<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel = "stylesheet" />
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<form class = "row">
  <div class = "col-10">
    <input type = "text" name = "search" id = "search" value = "test" placeholder = "Search accounts, contracts and transactions" class = "form-control">
  </div>
  <div class = "col-2">
    <input type = "button" name = "commit" value = "Search" class = "btn btn-primary btn-block">
  </div>
</form>

07.04.2020 12:10

Самый простой способ управлять шириной поля ввода - просто добавить класс w-25 в поле ввода.

 <input class = "form-control w-25" type = "text" placeholder = "Search" aria-label = "Search">

вы можете установить ширину по своему усмотрению w-25w-50w-75 & w-100 или w-auto

w определяет ширину.

16.11.2020 10:35

Другие вопросы по теме

Анимация сворачивания Bootstrap во внутренних раскрывающихся списках

Как отключить routerLink для тегов привязки

Почему в clearfix играют роль свойства отображения и содержимого

Название карусели исчезает

Bootstrap - выравнивания отключены, не знаю, как это исправить

Bootstrap 4 свернуть меню перехода

Bootstrap 4 Ошибка открытия модального окна

Форма проверки JQuery внутри Bootstrap Modal не отправляется после проверки

Создание заголовка двухстрочной таблицы в HTML

Детские изображения одинаковой высоты в адаптивных 4 столбцах Bootstrap. Как?

Bootstrap 4 - Отрегулируйте ширину поля ввода

Ответы 3

Другие вопросы по теме

Похожие вопросы