it-swarm.com.ru

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

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

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

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

89
shadowf

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

69
George Filippakos

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

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

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

10
Ced

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

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

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

.form-control {
    width:100px;
}

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

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

9
Larvex

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

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

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

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

4
mattauckland

В Bootstrap 3

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

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

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

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

3
José Antonio Postigo

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

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

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

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

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


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

input{
  width: 100px
}

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

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

3
Daan Witte

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

1
user3574492

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

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

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

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

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

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

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

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

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

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

0
Bmize729

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

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%, поэтому ширина соответствует ширине покрытия.

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

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

0
Hyung Woo Kim

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>
0
Ravi Ram