Ширина ввода в Bootstrap 3

Обновить снова.. Я закрываю этот вопрос, выбирая верхний ответ, чтобы люди не добавляли ответы, не понимая вопроса. На самом деле нет способа сделать это с помощью встроенных функций без использования сетки или добавления дополнительных css. Сетки не работают хорошо, если вы имеете дело с элементами help-block, которые должны выходить за рамки короткого ввода, например, но они являются "встроенными". Если это проблема, я рекомендую использовать дополнительные классы css, которые вы можете найти в обсуждении BS3 здесь. Теперь, когда BS4 отсутствует, можно использовать встроенные стили sizing для управления этим, поэтому это не будет иметь отношения к значительному времени. Спасибо всем за хороший вклад в этот популярный вопрос SO.

Обновление:. Этот вопрос остается открытым, потому что речь идет о встроенных функциях в BS для управления шириной ввода, не прибегая к сетке (иногда они должны управляться независимо). Я уже использую пользовательские классы для управления этим, поэтому это не практический подход к базовому css. Задача заключается в BS списке возможностей для обсуждения и еще предстоит решить.

Оригинальный вопрос: Кто-нибудь выясняет способ управления шириной ввода на BS 3? В настоящее время я использую некоторые пользовательские классы для добавления этой функциональности, но я, возможно, пропустил некоторые не документированные параметры.

Текущие документы говорят использовать .col-lg-x, но это явно не работает, поскольку оно может применяться только к контейнеру div, а затем вызывает все виды макета/поплавка.

Вот скрипка. Странно то, что на скрипке я даже не могу изменить форму группы.

http://jsfiddle.net/tX3ae/

<form role="form" class="row">
    <div class="form-group col-lg-1">
        <label for="code">Name</label>
        <input type="text" class="form-control">
    </div>

    <div class="form-group col-lg-1 ">
        <label for="code">Email</label>
        <input type="text" class="form-control input-normal">
    </div>

    <button type="submit" class="btn btn-default">Submit</button>
</form>
</div>

ОТВЕТЫ

Ответ 1

То, что вы хотите сделать, конечно же возможно.

То, что вы хотите, состоит в том, чтобы обернуть каждую "группу" в строку, а не всю форму только с одной строкой. Здесь:

<div class="container">
    <h1>My form</h1>
    <p>How to make these input fields small and retain the layout.</p>
    <form role="form">
        <div class="row">
            <div class="form-group col-lg-1">
                <label for="code">Name</label>
                <input type="text" class="form-control" />
            </div>
        </div>

        <div class="row">
            <div class="form-group col-lg-1 ">
                <label for="code">Email</label>
                <input type="text" class="form-control input-normal" />
            </div>
        </div>
        <div class="row">
            <button type="submit" class="btn btn-default">Submit</button>
        </div>
    </form>
</div>

НОВЫЙ jsfiddle, который я сделал: NEW jsfiddle

Обратите внимание, что в новой скрипте я также добавил "col-xs-5", чтобы вы могли видеть ее на небольших экранах тоже - удаление их не имеет значения. Но имейте в виду в своих оригинальных классах, вы используете только "col-lg-1". Это означает, что если ширина экрана меньше, чем размер медиаресурсов 'lg', то используется поведение блока по умолчанию. В основном, применяя только "col-lg-1", используемая вами логика:

IF SCREEN WIDTH < 'lg' (1200px by default)

   USE DEFAULT BLOCK BEHAVIOUR (width=100%)

ELSE

   APPLY 'col-lg-1' (~95px)

См. сетку Bootstrap 3 для получения дополнительной информации. Надеюсь, что я был ясен, иначе дайте мне знать, и я уточню.

Ответ 2

В Bootstrap 3

Вы можете просто создать собственный стиль:

.form-control-inline {
    min-width: 0;
    width: auto;
    display: inline;
}

Затем добавьте его, чтобы сформировать элементы управления следующим образом:

<div class="controls">
    <select id="expirymonth" class="form-control form-control-inline">
        <option value="01">01 - January</option>
        <option value="02">02 - February</option>
        <option value="03">03 - March</option>
        <option value="12">12 - December</option>
    </select>
    <select id="expiryyear" class="form-control form-control-inline">
        <option value="2014">2014</option>
        <option value="2015">2015</option>
        <option value="2016">2016</option>
    </select>
</div>

Таким образом, вам не нужно добавлять дополнительную разметку для макета в свой HTML.

Ответ 3

ASP.net MVC перейдите на Content- Site.css и удалите или прокомментируйте эту строку:

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

Ответ 4

Я думаю, вам нужно обернуть входы внутри col-lg-4, а затем внутри form-group, и все это будет содержаться в form-horizontal..

    <form class="form form-horizontal">
         <div class="form-group">
           <div class="col-md-3">
            <label>Email</label>
            <input type="email" class="form-control" id="email" placeholder="email">
           </div>
         </div>
         ...
     </form>

Демо на Bootply - http://bootply.com/78156

РЕДАКТИРОВАТЬ: Из бутстрапа 3 документа..

Входы, выборки и текстовые поля по умолчанию в пакете Bootstrap равны 100%. Чтобы использовать встроенную форму, вам нужно будет установить ширину элементов управления формы, используемых внутри.

Итак, еще один вариант - установить определенную ширину с помощью CSS:

.form-control {
    width:100px;
}

Или примените col-sm-* к `form-group '.

Ответ 5

<div class="form-group col-lg-4">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>

Добавьте класс в форму .group, чтобы ограничить входы

Ответ 6

Текущие документы говорят использовать .col-xs-x, no lg. Затем я стараюсь играть и, похоже, работает:

http://jsfiddle.net/tX3ae/225/

чтобы сохранить макет, возможно, вы можете изменить, где вы кладете класс "строка" следующим образом:

<div class="container">
  <h1>My form</h1>
  <p>How to make these input fields small and retain the layout.</p>
  <div class="row">
    <form role="form" class="col-xs-3">

      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name" name="name" >
      </div>

      <div class="form-group">
        <label for="email">Email</label>
        <input type="text" class="form-control" id="email" name="email">
      </div>

      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>
</div>

http://jsfiddle.net/tX3ae/226/

Ответ 7

Если вы используете шаблон Master.Site в Visual Studio 15, базовый проект имеет "Site.css", который ПЕРЕКРЫВАЕТ ширину полей управления формой.

Я не мог получить ширину моих текстовых полей, чтобы получить ширину, ширину примерно 300 пикселей. Я пробовал ВСЕ, и ничего не получилось. Я обнаружил, что в Site.css есть параметр, который вызывает проблему.

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

/* Set widths on the form inputs since otherwise they're 100% wide */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
    max-width: 280px;
}

Ответ 8

Я знаю, что это старый поток, но я столкнулся с той же проблемой со встроенной формой, и ни один из вышеперечисленных вариантов не решил проблему. Поэтому я установил свою встроенную форму следующим образом: -

<form class="form-inline" action="" method="post" accept-charset="UTF-8">
    <div class="row">
        <div class="form-group col-xs-7" style="padding-right: 0;">
            <label class="sr-only" for="term">Search</label>
            <input type="text" class="form-control" style="width: 100% !important;" name="term" id="term" placeholder="Search..." autocomplete="off">
            <span class="help-block">0 results</span>
        </div>
        <div class="form-group col-xs-2">
            <button type="submit" name="search" class="btn btn-success" id="search">Search</button>
        </div>
    </div>
</form>

Это было мое решение. Бит хакерский взлом, но сделал работу для встроенной формы.

Ответ 9

В Bootstrap 3

Все текстовые <input> , <textarea> и <select> элементы с .form-control установлены на ширину: 100%; по умолчанию.

http://getbootstrap.com/css/#forms-example

Кажется, в некоторых случаях мы должны вручную установить максимальную ширину для ввода.

Во всяком случае, ваш пример работает. Просто проверьте его на большом экране, чтобы вы могли видеть, что поля имени и электронной почты получают 2/12 из них (col-lg-1 + col-lg-1 и у вас есть 12 столбцов). Но если у вас меньше экран (просто измените размер вашего браузера), входы будут расширяться до конца строки.

Ответ 10

Вам не нужно бросать простой css:)

.short { max-width: 300px; }
<input type="text" class="form-control short" id="...">

Ответ 11

Вы можете добавить атрибут стиля или добавить определение для входного тега в файле css.

Вариант 1: добавление атрибута style

<input type="text" class="form-control" id="ex1" style="width: 100px;">


Вариант 2: определение в css

input{
  width: 100px
}

Вы можете изменить 100px в auto

Надеюсь, что смогу помочь.

Ответ 12

Если вы хотите просто уменьшить или увеличить ширину входных элементов Bootstrap по своему вкусу, я бы использовал max-width в CSS.

Вот очень простой пример, который я создал:

    <form style="max-width:500px">

    <div class="form-group"> 
    <input type="text" class="form-control" id="name" placeholder="Name">
    </div>

    <div class="form-group">
    <input type="email" class="form-control" id="email" placeholder="Email Address">
    </div>

    <div class="form-group">
    <textarea class="form-control" rows="5" placeholder="Message"></textarea>
    </div>   

    <button type="submit" class="btn btn-primary">Submit</button>
    </form>

Я установил максимальную ширину всей формы до 500 пикселей. Таким образом, вам не нужно будет использовать какую-либо систему сетки Bootstrap, и она также сохранит форму реагирования.

Ответ 13

Я тоже борюсь с той же проблемой, и это мое решение.

Источник HTML

<div class="input_width">
    <input type="text" class="form-control input-lg" placeholder="sample">
</div>

Введите код ввода с другим классом div

Источник CSS

.input_width{
   width: 450px;
}

укажите значение ширины или поля в закрытом классе div.

Ширина входного бутстрапа всегда по умолчанию равна 100%, поэтому ширина равна ширине.

Это не лучший способ, но самое простое и единственное решение, которое я решил проблему.

Надеюсь, что это помогло.

Ответ 14

Bootstrap 3 Я получил приятный отзывчивый макет, используя следующее:

<div class="row">
        <div class="form-group  col-sm-4">
        <label for=""> Date</label>
        <input type="date" class="form-control" id="date" name="date" placeholder=" date">
      </div>

   <div class="form-group  col-sm-4">
      <label for="hours">Hours</label>
        <input type="" class="form-control" id="hours" name="hours" placeholder="Total hours">
     </div>
</div>

Ответ 15

Я не знаю, почему все, кажется, пропускают файл site.css в папке "Содержимое". Посмотрите на строку 22 в этом файле, и вы увидите настройки для ввода. Похоже, что ваш сайт не ссылается на эту таблицу стилей.

Я добавил следующее:

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

для вашей скрипки, и все работает отлично.

Вы никогда не должны обновлять bootstrap.css или bootstrap.min.css. Это приведет к сбою при обновлении бутстрапа. Вот почему файл site.css включен. Здесь вы можете вносить изменения в сайт, который все равно даст вам отзывчивый дизайн, который вы ищете.

Вот скрипка с этим работает

Ответ 16

Добавьте и определите термины для style="" в поле ввода, что самый простой способ сделать это: Пример:

<form>
    <div class="form-group">
        <label for="email">Email address:</label>
        <input type="email" class="form-control" id="email" style="width:200px;">
    </div>
    <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" style="width:200px">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

Ответ 17

Bootstrap использует класс "form-input" для управления атрибутами "полей ввода". Просто добавьте свой собственный класс "form-input" с требуемой шириной, границей, размером текста и т.д. В ваш файл css или раздел главы.

(или иначе, добавьте встроенный код size = '5' во входные атрибуты в разделе body.)

<script async src="//jsfiddle.net/tX3ae/embed/"></script>