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

Как сделать поле ввода начальной загрузки ровно на 100% таким же широким, как его родитель?

Как писал Стив-о'Брайен в Bootstrap Issue #1058:

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

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

8 62
css twitter-bootstrap

8 ответов:

применение input-block-level класс отлично работает для меня, через различные ширины экрана. Он определяется Bootstrap in 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.

107

просто добавьте размер коробки:

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

для тех, кто гуглит это, одно предложение-удалить все 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>
With input-group

новый код:

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

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

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

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

content-box

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

border-box

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

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

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

3

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

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

вам нужно только переопределить мин-ширина set 100% и важно и вот результат:

enter image description here

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

enter image description here

3

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

width: 100% !important;
0

о чем?

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

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

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