Lebar input pada Bootstrap 3

Perbarui lagi: Saya menutup pertanyaan ini dengan memilih jawaban teratas untuk mencegah orang menambahkan jawaban tanpa benar-benar memahami pertanyaan itu. Pada kenyataannya tidak ada cara untuk melakukannya dengan fungsionalitas build in tanpa menggunakan kisi atau menambahkan css tambahan. Grid tidak berfungsi dengan baik jika Anda berurusan dengan help-blockelemen yang perlu melampaui input pendek misalnya tetapi mereka 'built-in'. Jika itu adalah masalah saya sarankan menggunakan kelas css tambahan yang dapat Anda temukan dalam diskusi BS3 di sini . Sekarang setelah BS4 keluar, dimungkinkan untuk menggunakan gaya ukuran yang disertakan untuk mengelola ini sehingga ini tidak akan relevan untuk lebih lama. Terima kasih atas masukan yang baik untuk pertanyaan SO yang populer ini.

Update: Pertanyaan ini tetap terbuka karena ini adalah tentang built-in fungsi dalam BS untuk mengelola lebar masukan tanpa menggunakan grid (kadang-kadang mereka harus dikelola secara independen). Saya sudah menggunakan kelas khusus untuk mengelola ini jadi ini bukan cara-untuk pada css dasar. Tugasnya ada dalam daftar diskusi fitur BS dan belum ditangani.

Pertanyaan Asli: Adakah yang tahu cara mengelola lebar input pada BS 3? Saat ini saya menggunakan beberapa kelas khusus untuk menambahkan fungsi itu tetapi saya mungkin telah melewatkan beberapa opsi yang tidak didokumentasikan.

Dokumen saat ini mengatakan untuk menggunakan .col-lg-x tetapi itu jelas tidak berfungsi karena hanya dapat diterapkan pada div kontainer yang kemudian menyebabkan semua jenis masalah tata letak / float.

Ini biola. Aneh adalah bahwa pada biola saya bahkan tidak bisa mengubah ukuran-kelompok.

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>

Apa yang ingin Anda lakukan tentu dapat dicapai.

Yang Anda inginkan adalah untuk membungkus setiap 'grup' dalam satu baris, bukan seluruh formulir hanya dengan satu baris. Sini:

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

The jsfiddle BARU yang kubuat: jsfiddle BARU

Perhatikan bahwa dalam biola baru, saya juga menambahkan 'col-xs-5' sehingga Anda dapat melihatnya di layar yang lebih kecil juga - menghapusnya tidak ada bedanya. Namun perlu diingat di kelas asli Anda, Anda hanya menggunakan 'col-lg-1'. Itu berarti jika lebar layar lebih kecil dari ukuran kueri media 'lg', maka perilaku blok default digunakan. Pada dasarnya dengan hanya menerapkan 'col-lg-1', logika yang Anda gunakan adalah:

IF SCREEN WIDTH < 'lg' (1200px by default)

   USE DEFAULT BLOCK BEHAVIOUR (width=100%)

ELSE

   APPLY 'col-lg-1' (~95px)

Lihat sistem kisi Bootstrap 3 untuk info lebih lanjut. Saya harap saya jelas kalau tidak biarkan saya tahu dan saya akan menguraikan.

Di Bootstrap 3

Anda cukup membuat gaya khusus:

.form-control-inline {
    min-width: 0;
    width: auto;
    display: inline;
}

Kemudian tambahkan ke bentuk kontrol seperti:

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

Dengan cara ini Anda tidak perlu meletakkan markup tambahan untuk tata letak di HTML Anda.

ASP.net MVC pergi ke Content- Site.css dan hapus atau komentari baris ini:

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

Saya pikir Anda perlu membungkus input di dalam col-lg-4, dan kemudian di dalam form-groupdan semuanya terkandung dalam 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>

Demo di Bootply - http://bootply.com/78156

EDIT: Dari Bootstrap 3 docs ..

Input, pilih, dan textareas 100% lebar secara default di Bootstrap. Untuk menggunakan formulir sebaris, Anda harus mengatur lebar pada kontrol formulir yang digunakan di dalam.

Jadi opsi lain adalah mengatur lebar tertentu menggunakan CSS:

.form-control {
    width:100px;
}

Atau, terapkan col-sm-*pada `form-group '.

Dokumen saat ini mengatakan untuk menggunakan .col-xs-x, no lg. Lalu saya mencoba biola dan sepertinya berhasil:

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

untuk menjaga tata letak mungkin Anda dapat mengubah tempat Anda meletakkan "baris" kelas seperti ini:

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

Tambahkan kelas ke form.group untuk membatasi input

Jika Anda menggunakan templat Master.Site di Visual Studio 15, proyek dasar memiliki "Site.css" yang MENYATAKAN lebar bidang kontrol formulir.

Saya tidak bisa mendapatkan lebar kotak teks saya untuk mendapatkan yang lebih lebar dari sekitar 300px lebar. Saya mencoba semuanya dan tidak ada yang berhasil. Saya menemukan bahwa ada pengaturan di Site.css yang menyebabkan masalah.

Singkirkan ini dan Anda bisa mendapatkan kendali atas lebar bidang Anda.

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

Saya tahu ini adalah utas lama, tetapi saya mengalami masalah yang sama dengan formulir sebaris, dan tidak ada opsi di atas memecahkan masalah. Jadi saya memperbaiki bentuk inline saya seperti: -

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

Itu solusi saya. Agak hack, tetapi melakukan pekerjaan untuk bentuk inline.

Anda dapat menambahkan atribut style atau Anda dapat menambahkan definisi untuk tag input dalam file css.

Opsi 1: menambahkan atribut style

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

Opsi 2: definisi dalam css

input{
  width: 100px
}

Anda dapat mengubah 100px dalam otomatis

Saya harap saya bisa membantu.

Di Bootstrap 3

Semua elemen <input>, <textarea>, dan elemen <select> dengan kontrol bentuk diatur ke lebar: 100%; secara default.

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

Tampaknya, dalam beberapa kasus, kita harus mengatur secara manual lebar maks yang kita inginkan untuk input.

Bagaimanapun, contoh Anda berhasil. Cukup periksa dengan layar besar, sehingga Anda dapat melihat bidang nama dan email mendapatkan 2/12 dari with (col-lg-1 + col-lg-1 dan Anda memiliki 12 kolom). Tetapi jika Anda memiliki layar yang lebih kecil (hanya mengubah ukuran browser Anda), input akan berkembang hingga akhir baris.

Anda tidak harus menyerah css sederhana :)

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

Jika Anda ingin mengurangi atau menambah lebar elemen input Bootstrap sesuai keinginan Anda, saya akan menggunakan max-width CSS.

Ini adalah contoh sederhana yang saya buat:

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

Saya telah mengatur lebar maksimum seluruh formulir menjadi 500px. Dengan cara ini Anda tidak perlu menggunakan sistem grid Bootstrap apa pun dan itu juga akan membuat formulir responsif.

Saya juga bergumul dengan masalah yang sama, dan ini solusi saya.

Sumber HTML

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

Tutup kode input dengan kelas div lain

Sumber CSS

.input_width{
   width: 450px;
}

memberikan pengaturan lebar atau margin pada kelas div tertutup.

Lebar input Bootstrap selalu default sebagai 100%, jadi lebar adalah mengikuti lebar tertutup.

Ini bukan cara terbaik, tetapi solusi termudah dan satu-satunya yang saya memecahkan masalah.

Semoga ini bisa membantu.

Saya tidak tahu mengapa semua orang tampaknya mengabaikan file site.css di folder Konten. Lihat baris 22 dalam file ini dan Anda akan melihat pengaturan agar input dikontrol. Tampaknya situs Anda tidak merujuk pada style sheet ini.

Saya menambahkan ini:

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

untuk biola Anda dan itu berfungsi dengan baik.

Anda seharusnya tidak pernah memperbarui bootstrap.css atau bootstrap.min.css. Melakukannya akan membuat Anda gagal ketika bootstrap diperbarui. Itu sebabnya file site.css disertakan. Di sinilah Anda dapat membuat perubahan ke situs yang masih akan memberi Anda desain responsif yang Anda cari.

Ini biola yang berfungsi

Tambahkan dan tentukan istilah untuk style=""bidang input, itu cara termudah untuk melakukannya: Contoh:

<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 menggunakan 'form-input' kelas untuk mengontrol atribut 'bidang input'. Cukup, tambahkan kelas 'form-input' Anda sendiri dengan lebar, batas, ukuran teks, dll yang diinginkan di file css atau bagian kepala Anda.

(atau yang lain, langsung tambahkan kode inline size = '5' di atribut input di bagian tubuh.)

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

Bootstrap 3 Saya mencapai tata letak formulir responsif yang bagus menggunakan yang berikut:

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