Ширина введення на Bootstrap 3

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

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

Оригінальне запитання: Хто-небудь придумує спосіб управління шириною входу на BS 3? Зараз я використовую деякі спеціальні класи, щоб додати цю функціональність, але, можливо, я пропустив деякі недокументовані варіанти.

Поточні документи говорять про використання .col-lg-x, але це явно не працює, оскільки він може бути застосований лише до контейнера, який потім викликає всі види проблем із компонуванням / float.

Ось загадка. Дивно те, що на скрипці я навіть не можу отримати форму-групу для зміни розміру.

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, яку я зробив: 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 . Я сподіваюся, що я був зрозумілий, інакше дайте мені знати, і я докладу.

У 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;*/
}

Я думаю, вам потрібно загорнути вхід усередину a 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>

Демо в режимі завантаження - http://bootply.com/78156

РЕДАКТУВАННЯ: З завантажувальної програми 3 документи.

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

Отже, ще один варіант - встановити конкретну ширину за допомогою CSS:

.form-control {
    width:100px;
}

Або застосувати col-sm-*форму до групи форм.

Поточні документи кажуть використовувати .col-xs-x, ні 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>

Додайте клас до 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 або ви можете додати визначення тегу введення у файлі css.

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

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

Варіант 2: визначення в css

input{
  width: 100px
}

Ви можете змінити 100 пікселів автоматично

Сподіваюся, я міг допомогти.

У 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 у папці "Зміст". Подивіться на рядок 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" для управління атрибутами "полів введення". Просто додайте свій власний клас "введення форми" з потрібною шириною, рамкою, розміром тексту тощо у вашому файлі css або заголовку.

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

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