Bootstrap 3'te giriş genişlikleri

Tekrar güncelle: İnsanların soruyu gerçekten anlamadan cevap eklemelerini engellemek için en iyi cevabı seçerek bu soruyu kapatıyorum. Gerçekte, ızgara kullanmadan veya ekstra css eklemeden yapı işlevselliğiyle bunu yapmanın bir yolu yoktur. help-blockÖrneğin, kısa bir girdinin ötesine geçmesi gereken öğelerle uğraşıyorsanız, ızgaralar iyi çalışmaz, ancak bunlar 'yerleşiktir'. Bu bir sorunsa, burada BS3 tartışmasında bulabileceğiniz ekstra css sınıflarını kullanmanızı öneririm . Artık BS4 çıktıya göre, bunu yönetmek için dahil edilen boyutlandırma stillerini kullanmak mümkün, bu yüzden bu çok daha uzun süre geçerli olmayacak. Bu popüler SO sorusuna iyi girdi için teşekkürler.

Güncelleme: Bu soru açık kalır çünkü BS'de giriş genişliğini şebekeye başvurmadan yönetmek için yerleşik işlevsellik hakkındadır (bazen bağımsız olarak yönetilmeleri gerekir). Ben zaten bu temel css bir how-to değil bu yönetmek için özel sınıflar kullanın. Görev BS özellik tartışma listesindedir ve henüz ele alınmamıştır.

Orijinal Soru: Herkes BS 3 giriş genişliği yönetmek için bir yol bulmak? Şu anda bu işlevi eklemek için bazı özel sınıflar kullanıyorum ama belgelenmemiş bazı seçenekleri kaçırmış olabilir.

Şu anki dokümanlar .col-lg-x kullandıklarını söylüyor ancak bu sadece işe yaramaz çünkü yalnızca div div'e uygulanabiliyor.

İşte bir keman. Garip, kemanda form grubunu yeniden boyutlandırmam bile mümkün değil.

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>

Yapmak istediğiniz şey kesinlikle gerçekleştirilebilir.

İstediğiniz şey, her 'grubu' tek bir satırla değil, tüm formu değil bir sıraya sarmaktır. Buraya:

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

Yaptığım YENİ jsfiddle: YENİ jsfiddle

Yeni kemanda, 'col-xs-5' i de ekledim, böylece daha küçük ekranlarda da görebilirsiniz - bunları kaldırmak fark etmez. Ancak orijinal sınıflarınızda yalnızca 'col-lg-1' kullanıldığını unutmayın. Bu, ekran genişliği 'lg' ortam sorgusu boyutundan küçükse, varsayılan blok davranışı kullanılır. Temel olarak yalnızca 'col-lg-1' uygulayarak, kullandığınız mantık şöyledir:

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

   USE DEFAULT BLOCK BEHAVIOUR (width=100%)

ELSE

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

Daha fazla bilgi için Bootstrap 3 ızgara sistemine bakınız . Umarım netmişimdir, aksi halde bana haber ver ve ayrıntılandırırdım.

Bootstrap 3'te

Sadece özel bir stil oluşturabilirsiniz:

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

Sonra aşağıdaki gibi denetimler oluşturmak için ekleyin:

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

Bu şekilde, HTML'nizde mizanpaj için fazladan işaretleme yapmak zorunda kalmazsınız.

ASP.net MVC Content- Site.css gidin ve bu satırı kaldırın veya yorum yapın:

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

Bence girişleri bir içine sarmanız gerekiyor col-lg-4, sonra içinde form-groupve hepsi bir 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 ile ilgili demo - http://bootply.com/78156

EDIT: Bootstrap 3 belgelerinden ..

Girişler, seçimler ve textareas, Bootstrap'ta varsayılan olarak% 100 genişliğindedir. Satır içi formu kullanmak için, içinde kullanılan form denetimlerinde bir genişlik ayarlamanız gerekir.

Başka bir seçenek de CSS kullanarak belirli bir genişlik ayarlamaktır:

.form-control {
    width:100px;
}

Veya, col-sm-*form grubuna uygulayın.

Mevcut dokümanlar .col-xs-x kullandığını söylüyor, lg yok. Sonra keman deneyin ve işe yarıyor gibi görünüyor:

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

düzeni korumak için belki "row" sınıfını nereye koyacağınızı değiştirebilirsiniz:

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

Girdileri kısıtlamak için sınıfı form.group öğesine ekleyin

Visual Studio 15 Master.Site şablonu kullanıyorsanız, temel proje, form denetim alanlarının genişliğini AŞIRI "Site.css" vardır.

Yaklaşık 300 piksel genişlikten daha geniş olması için metin kutularımın genişliğini alamadım. HER ŞEYİ denedim ve hiçbir şey işe yaramadı. Site.css içinde soruna neden olan bir ayar olduğunu buldum.

Bundan kurtulun ve alan genişliğiniz üzerinde kontrol sahibi olun.

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

Bu eski bir iş parçacığı olduğunu biliyorum, ama aynı sorunu satır içi formu ile yaşadım ve yukarıdaki seçeneklerin hiçbiri sorunu çözdü. Bu yüzden satır içi formumu şöyle düzelttim:

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

Benim çözümüm buydu. Biraz hacky kesmek, ama işi satır içi bir form için yaptı.

Bir css dosyasındaki style niteliğini veya girdi etiketi için bir tanım ekleyebilirsiniz.

1.Seçenek: Stil niteliğini ekleme

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

2.Seçenek: CSS'deki Tanım

input{
  width: 100px
}

Otomatik olarak 100 pikseli değiştirebilirsiniz

Umarım yardımcı olabilmişimdir.

Bootstrap 3'te

.Form-kontrolüne sahip tüm metinsel <input>, <textarea> ve <select> elemanları genişliğe ayarlanmıştır:% 100; varsayılan olarak.

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

Bazı durumlarda, girişler için istediğimiz maksimum genişliği manuel olarak ayarlamamız gerekiyor gibi görünüyor.

Her neyse, örneğin işe yarıyor. Sadece büyük bir ekranla kontrol edin, böylece ad ve e-posta alanlarının 2 / 12'sini ile aldığını görebilirsiniz (col-lg-1 + col-lg-1 ve 12 sütununuz vardır). Ancak daha küçük bir ekranınız varsa (tarayıcınızı yeniden boyutlandırın) girişler satır sonuna kadar genişler.

Basit css vazgeçmek zorunda değilsiniz :)

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

Bootstrap'ın giriş öğelerinin genişliğini beğeninize göre azaltmak veya artırmak istiyorsanız max-width, CSS'de kullanırım.

İşte oluşturduğum çok basit bir örnek:

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

Tüm formun maksimum genişliğini 500 piksele ayarladım. Bu şekilde Bootstrap'ın ızgara sistemini kullanmanıza gerek kalmaz ve formu da yanıt verir.

Ben de aynı sorunla mücadele ediyorum ve bu benim çözümüm.

HTML kaynağı

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

Giriş kodunu başka bir div sınıfıyla kaplama

CSS kaynağı

.input_width{
   width: 450px;
}

kapsanan div sınıfında herhangi bir genişlik veya kenar boşluğu ayarı verin.

Önyükleme giriş genişliği her zaman% 100 varsayılan değerdir, bu nedenle genişlik kapsanan genişliği takip eder.

Bu en iyi yol değil, sorunu çözdüğüm en kolay ve tek çözüm.

Umarım bu yardımcı olmuştur.

Neden İçerik klasöründeki herkes site.css dosyasını göz ardı gibi görünmüyor. Bu dosyadaki 22. satıra bakın ve kontrol edilecek girdinin ayarlarını göreceksiniz. Siteniz bu stil sayfasına referans vermiyor gibi görünüyor.

Bunu ekledim:

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

ve iyi çalışıyor.

Hiçbir zaman bootstrap.css veya bootstrap.min.css dosyalarını güncellememelisiniz. Bunu yaptığınızda, bootstrap güncellendiğinde başarısız olursunuz. Bu nedenle site.css dosyası eklenmiştir. Burada, aradığınız duyarlı tasarıma sahip olacak sitede değişiklikler yapabilirsiniz.

İşte onunla çalışan keman

style=""Girdi alanına terimler ekleyin ve tanımlayın , bu konuda en kolay yol: Örnek:

<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, 'giriş alanlarının' niteliklerini kontrol etmek için 'form-input' sınıfını kullanır. Basitçe, kendi 'form-input' sınıfınızı istediğiniz genişlik, kenarlık, metin boyutu, vb. İle css dosyanıza veya baş bölümünüze ekleyin.

(veya başka bir deyişle, gövde bölümündeki giriş özelliklerine size = '5' satır içi kodunu doğrudan ekleyin.)

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

Bootstrap 3 Aşağıdakileri kullanarak güzel, duyarlı bir form düzeni elde ettim:

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