Ширина ввода на 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

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

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

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

.form-control {
    width:100px;
}

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

Текущие документы говорят использовать .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/

<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, чтобы ограничить входы

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

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

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

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

В Bootstrap 3

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

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

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

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

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

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

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

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

input{
  width: 100px
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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>

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

Источник HTML

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

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

Источник CSS

.input_width{
   width: 450px;
}

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

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

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

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