Mengapa bidang formulir Twitter Bootstrap saya meluap-luap dengan baik menggunakan wadah cairan?
UPDATE: Demo masalah di sini:
Dari sekitar 767px hingga 998px, bidang formulir lebih lebar daripada sumur yang berisi.
Lebih kecil dari 767px dan seluruh area formulir bergeser ke baris baru. Halaman yang dirender ketika jendela browser memiliki lebar sekitar 200px ditampilkan dengan sempurna. Bidang formulir menyusut seperti yang Anda harapkan.
Untuk visual, lihat pertanyaan yang sangat mirip ini: https://stackoverflow.com/questions/11706019/twitter-bootstrap-css-static-fluid-form-positioning
Berikut'semuanya di Kepala:
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>Inilah semua yang ada di dalam Tubuh:
<div class="container-fluid">
<div class="row-fluid">
<div class="span8">
<p>Some Content.</p>
</div>
<div class="span4">
<div class="well">
<div class="control-group">
<label class="control-label" for="name">Your Name</label>
<div class="controls">
<input type="text" class="input-xlarge" name="name" id="name" maxlength="100" />
</div>
</div>
</div>
</div>
</div>
</div>Saya pikir saya salah memahami beberapa bagian dari kerangka kerja. Bukankah seharusnya saya tidak menggunakan wadah cairan? Apa yang saya lakukan salah? Saya bisa melakukan sesuatu untuk memperbaikinya, tetapi saya pikir masalahnya mungkin karena saya melakukan sesuatu yang salah secara garis besar.
Saya mencoba mengubah span saya menjadi 7 dan 5 dan masih mengalami kesalahan yang sama. Saya mencoba 6 dan 6, tetapi pada saat itu halaman mulai terlihat konyol. Jawaban-jawaban lainnya tidak masuk akal bagi saya.
Saya mengubah kelas input menjadi besar, bukan xlarge. Masih ada rentang lebar di mana ia meluap, dan saya benar-benar ingin bidang formulir yang lebih luas jika ada ruang pada tampilan.
Saya ingin menghindari bilah gulir horizontal, dan saya ingin teks halaman memiliki ukuran yang sama dalam mode lanskap atau portait pada ponsel cerdas saya.
PEMBARUAN: Gambar
Halaman masalah saya:
Versi yang disederhanakan:
Versi yang disederhanakan pada lebar browser 200 px:
Tag html input dan gaya .input-* yang sesuai hanya mengatur width css. Ini adalah berdasarkan desain.
Tetapi menambahkan css max-width:100% akan memastikan bahwa input yang terlalu besar tetap terkendali.
misalnya, tambahkan ini ke Head Anda:_
<style>
input {
max-width: 100%;
}
</style>
Biasanya saya lebih suka menggunakan class="row-fluid" dan class="span12" dalam elemen dengan class="spanX" untuk mendapatkan lebar 100% dari beberapa elemen. Itu tidak akan menyebabkan bug pada resolusi yang berbeda. Jadi, saya telah menambahkan kelas row-fluid lain di elemen anda dengan kelas span4, dan di dalam row-fluid baru itu ditambahkan div dengan span12. Anda terkadang harus mengesampingkan pengaturan Bootstrap default untuk mendapatkan apa yang Anda butuhkan, jadi saya juga menambahkan kelas .my-input di dalam elemen <input /> untuk mendapatkan lebar 100% dan menghapus padding kiri dan kanan (padding akan menyebabkan bug di sisi kanan). Dan berikut adalah kodenya:
<div class="container-fluid">
<div class="row-fluid">
<div class="span8">
<p>Some Content.</p>
</div>
<div class="span4 well">
<div class="row-fluid">
<div class="span12">
<label class="control-label" for="name">Your Name</label>
<input type="text" class="my-input" name="name" id="name" maxlength="100" />
</div>
</div>
</div>
</div>
</div>dan kelas CSS untuk override
.my-input
{
width: 100%;
padding: 4px 0 4px 0 !important;
}Anda dapat melihat dan Jsfiddle demo, cobalah untuk mengubah ukuran layar.
Saya baru saja menemukan masalah ini dan memeriksa dokumen bootstrap untuk input formulir yang menyatakan ' Gunakan kelas ukuran relatif seperti .input-large atau cocokkan input Anda dengan ukuran kolom grid menggunakan kelas .span *. '
Baris bootstrap saya diatur ke span9 untuk konten dan span3 untuk sidebar. Pengaturan <input class='span3'/> memecahkan masalah bagi saya, kotak input tetap berada di dalam bilah samping saat ukuran layar berkurang.
