Идеальная 100% -ная ширина родительского контейнера для ввода Bootstrap?

Как создать поле ввода Bootstrap на 100% больше его родительского?

Как сказал Стив-Оббриен в Bootstrap Issue # 1058:

Настройка на 100% не работает, если применяется непосредственно к полю ввода, так как она не принимает для учета заполнения. Таким образом, вы получаете 100% контейнера плюс заполнение в поле ввода, поэтому поле ввода обычно выходит за пределы его контейнера.

Этот билет предлагает различные решения, но я ищу лучший способ сделать это - предпочтительно класс CSS, уже предоставленный Bootstrap.

Ответы

Ответ 1

Применение класса input-block-level отлично подходит для меня, используя различные ширины экрана. Он определяется Bootstrap в mixins.less следующим образом:

// Block level inputs
.input-block-level {
  display: block;
  width: 100%;
  min-height: 28px;        // Make inputs at least the height of their button counterpart
  .box-sizing(border-box); // Makes inputs behave like true block-level elements
}

Это очень похоже на стиль, предложенный 'ассемблером' в его комментарий к вопросу # 1058.

Ответ 2

Просто добавьте размер окна:

input[type="text"] {
    box-sizing: border-box;
}

Ответ 3

Для всех, кто использует Google, одно предложение - удалить все экземпляры класса input-group. Работала для меня в аналогичной ситуации. Исходный код:    

<form>
  <div class="bs-callout">
    <div class="row">
      <div class="col-md-4">
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" name="time" placeholder="Time">
          </div>
        </div>
      </div>
      <div class="col-md-8">
        <div class="form-group">
          <div class="input-group">
            <select name="dtarea" class="form-control">
              <option value="1">Option value 1</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="input-group">
        <input type="text" name="reason" class="form-control" placeholder="Reason">
      </div>
    </div>
  </div>
</form>

Ответ 4

Если вы используете шаблон С# ASP.NET MVC по умолчанию, вы можете обнаружить, что site.css переопределяет некоторые стили Bootstraps. Если вы хотите использовать Bootstrap, как я сделал, M $ override this (без вашего ведома) может стать источником большого разочарования! Не стесняйтесь удалить любой из нежелательных стилей...

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

Ответ 5

Я нашел решение, которое сработало в моем случае:

<input class="form-control" style="min-width: 100%!important;" type="text" />

Вам нужно только переопределить минимальную ширину, установленную на 100%, и важно, и результат будет таким:

enter image description here

Если вы не примените его, вы всегда получите это:

enter image description here

Ответ 6

Чтобы получить желаемый результат, вы должны установить "box-sizing: border-box" против стандартного значения "box-sizing: content-box". Это именно то, о чем вы говорите (из MDN):

Содержание ящика

Это начальное и значение по умолчанию, указанное в стандарте CSS. Свойства ширины и высоты измеряются, включая только содержимое, но не прописку, границу или маржу.

границы окна

Свойства ширины и высоты включают в себя содержимое, заполнение и границу, но не маржу.

Ссылка: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Совместимость для этого CSS хороша.

Ответ 7

просто добавьте:

width: 100% !important;

Ответ 8

Как насчет?

    input[type="text"] {
          max-width:none;
   }

Проверка того, что некоторый файл css вызывает проблемы. По умолчанию bootstrap отображается по всей ширине. Например, в каталоге MVC Content является site.css, и существует ограничение, ограничивающее определение.

input,select,textarea {
max-width: 280px;}

Ответ 9

Используйте .container-fluid, если вы хотите использовать в качестве родителя полную ширину, охватывающую всю ширину вашего окна просмотра.