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

Обновление еще раз: я закрываю этот вопрос, выбирая верхний ответ, чтобы люди не могли добавлять ответы, не понимая вопроса. В действительности нет способа сделать это с помощью встроенной функциональности без использования сетки или добавления дополнительных CSS. Сетки не работают хорошо, если вы имеете дело с help-blockэлементами, которые, например, должны выходить за рамки короткого ввода, но они встроены. Если это проблема, я рекомендую использовать дополнительные классы CSS, которые вы можете найти в обсуждении BS3 здесь . Теперь, когда вышла BS4, можно использовать включенные стили определения размеров для управления этим, так что это не будет актуальным в течение длительного времени. Спасибо всем за хороший вклад в этот популярный вопрос 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>

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

То, что вы хотите, - это обернуть каждую «группу» в ряд, а не всю форму только одной строкой. Вот:

<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, который я сделал: НОВЫЙ 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 для получения дополнительной информации. Я надеюсь, что я был ясен, иначе дайте мне знать, и я уточню.

В 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.

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

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

Я думаю, что вам нужно обернуть входные данные внутри 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

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

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

Так что другой вариант - установить конкретную ширину с помощью CSS:

.form-control {
    width:100px;
}

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

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

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

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

<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/

<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>

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

Если вы используете шаблон 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;
}

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

<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>

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

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

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

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

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

input{
  width: 100px
}

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

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

В Bootstrap 3

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

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

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

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

Вы не должны отказываться от простого CSS :)

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

Если вы хотите просто уменьшить или увеличить ширину элементов ввода 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, и она также будет держать форму отзывчивой.

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

HTML источник

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

Накройте входной код другим классом div

CSS источник

.input_width{
   width: 450px;
}

задайте любой параметр ширины или поля на покрытом классе div.

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

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

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

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

Я добавил это:

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

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

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

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

Добавьте и определите термины для 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>

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

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

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

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>