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


154

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

5
Зачем использовать bootstrap для управления этой шириной? Это, кажется, не особенно хорошо в этом, и это вводит сложность.
Имон Нербонн

1
Зачем использовать для этого начальную загрузку, @Eamon? На ум приходит отзывчивый дизайн и согласованность с остальными элементами, с которыми работает bootstrap. И вообще, весь вопрос в том, как это сделать, не внося сложности.
ctb

@ctb: простой CSS прекрасно справляется с подобными проблемами; нет необходимости в дополнительной сложности начальной загрузки.
Имон Нербонн

1
так подождите, ответили на этот вопрос? 38 голосов это много.
Ладья

1
@rook - ответ: нет, встроенных функций нет, хотя они есть в их списке обсуждений. Однако, поскольку альтернативы идут, есть некоторые, предоставленные здесь, пока / если BS фактически не добавляет это.
cyberwombat

Ответы:


95

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

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

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


да, это то, что я положил в своем комментарии к @Skelly - есть открытый вопрос по этому вопросу, и они решат его, когда все уладится. Добавление строки нам не то, что я ищу из-за дополнительной разметки, которая совершенно не нужна, если они сделали правильные классы - что я и сделал. Я создал .input1-12 с процентной шириной, и я просто применить это к входу - прекрасно работает
Cyberwombat

7
Я не слишком много читал об этом посте, но ... »Используйте предопределенные классы сетки Bootstrap для выравнивания меток и групп элементов управления формы в горизонтальном макете, добавляя .form-horizontal к форме. Это приводит к изменению .form-groups для поведения как строки сетки, так что нет необходимости .row. "
DTC

@dtc Это мало помогает для ширины ввода?
Жак

@shadowf А что, если я хочу сделать ввод короче, чем его ярлык? Нужно ли вводить данные в еще одну пару div?
PowerGamer

1
спасибо, что работает для меня. Кстати, воскресенье 10 вечера для меня :-), так как я нахожусь на другой стороне земного шара.
Ананда

70

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


15
Это выигрывает, безусловно, на ответы. Это чистый, многоразовый и просто работает. На самом деле, он должен быть помещен в загрузчик по умолчанию, так как это очень распространенное раздражение. Очень редко вы хотите чистые блочные формы.
baweaver

Я попробовал это решение, но оно не сработало для меня. Я хотел ограничить ширину моего поля, поэтому я использовал «width: 200px» в пользовательском стиле, но это не изменило ширину. Только когда я установил max-width: 200px, я получил правильный результат.
paulo62

Когда я использую это, ширина не переопределит автоматическую ширину класса управления формой.
Джонни

1
Согласен с комментариями здесь - я пробовал это на самом деле, прежде чем посмотреть здесь, кажется, что это не перезаписывает значения по умолчанию ... не знаю, почему некоторые пользовательские стили делают, а некоторые нет.
Уил

1
Вот скрипка, демонстрирующая, как это выглядит: jsfiddle.net/yd1ukk10
brandones

25

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

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

Если вы посмотрите на скрипку, вы увидите, что ОП хочет сделать поля меньше, а не больше. Большая проблема здесь в том, что его сайт вообще не ссылается на site.css.
Bmize729

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

10

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


6
Вы должны добавить класс строки в группу форм - я провел обсуждение с командой Bootstrap, и они добавили возможность ввода определенного контроля ширины в свой список планирования. В то же время мы должны использовать полные сетки. Если вы пойдете дальше и добавите строку в класс группы форм и удалите горизонтальный класс, я отмечу этот ответ. Вот рабочая скрипка jsfiddle.net/tdUtX/2 и планирование github.com/twbs/bootstrap/issues/9397
cyberwombat

1
+ @ Яшуа - +1 отличный пример. Это также работает с классом input-group, что доставляло мне неприятности.
Дэвид Роббинс

10

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


1
не работает для небольших устройств, так как поле ввода становится слишком маленьким
FranBran

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


8
Это на самом деле не работает. Это заставляет каждый последующий элемент плавать рядом с этим. Вы должны добавить div с строкой класса в каждой группе форм, что смешно.
кибервомбат

6

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

спасибо человек, четыре года спустя это спасло меня
Rich

4

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

<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

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

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

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


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

input{
  width: 100px
}

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

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


3

В Bootstrap 3

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

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

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

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


3

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

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

1

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


0

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

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

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

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

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

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

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

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


0

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

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

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

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

0

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>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.