css - card - bootstrap form-group用法



Bootstrap 3上的輸入寬度 (12)

再次更新:我通過選擇最佳答案來關閉此問題,以防止人們在未真正理解問題的情況下添加答案。 實際上,沒有辦法通過構建功能來完成,而不使用網格或添加額外的CSS。 如果您處理的help-block元素需要超出一個簡短的輸入內容,例如“內置”,則網格效果不佳。 如果這是一個問題,我建議使用額外的CSS類,你可以在here的BS3討論中here 。 現在BS4已經不在了,可以使用包含的sizing風格來管理這個,所以這不會長久相關。 感謝所有關於這個受歡迎的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>

https://src-bin.com


Answer #1

ASP.net MVC轉到Content- Site.css並刪除或註釋以下行:

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

Answer #2

Bootstrap使用'form-input'類來控制'input fields'的屬性。 簡單地說,在你的css文件或head部分中添加你自己的'表單輸入'類,具有所需的寬度,邊框,文本大小等。

(或者直接在body部分的輸入屬性中添加size ='5'內聯代碼)。

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

Answer #3

你想要做的是肯定可以實現的。

你想要的是將每個'組'包裝成一行,而不是只有一行的整個表單。 這裡:

<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網格系統 。 我希望我很清楚,否則讓我知道,我會詳細說明。


Answer #4

在Bootstrap中3

所有帶有.form-control的文本<input>,<textarea>和<select>元素都設置為寬度:100%; 默認。

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

看起來,在某些情況下,我們必須手動設置輸入所需的最大寬度。

無論如何,你的例子的作品。 只需用大屏幕查看,就可以看到名稱和電子郵件字段正在獲得with(col-lg-1 + col-lg-1,並且有12列)的2/12。 但是,如果屏幕較小(只調整瀏覽器的大小),輸入將會擴展到行的末尾。


Answer #5

如果你只是想減少或增加Bootstrap的輸入元素的寬度,我會在CSS中使用max-width

這是我創建的一個非常簡單的例子:

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

我已將整個表單的最大寬度設置為500px。 這樣你就不需要使用任何Bootstrap的網格系統,它也會保持表單響應。


Answer #6

如果您在Visual Studio 15中使用Master.Site模板,則基礎項目具有“Site.css”,它覆蓋了表單控件字段的寬度。

我無法讓我的文本框的寬度超過300px寬。 我嘗試了一切,沒有任何工作。 我發現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;
}

Answer #7

您可以添加樣式屬性,也可以在css文件中為輸入標籤添加定義。

選項1:添加樣式屬性

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


選項2:在CSS中定義

input{
  width: 100px
}

你可以在auto中改變100px

我希望我能幫忙。


Answer #8

我不知道為什麼每個人似乎忽略了Content文件夾中的site.css文件。 看看這個文件中的第22行,你會看到要控制的輸入設置。 看起來你的網站沒有引用這個樣式表。

我加了這個:

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

到你的小提琴,它工作得很好。

你永遠不應該更新bootstrap.css或bootstrap.min.css。 這樣做會使您在啟動更新時失敗。 這就是為什麼包含site.css文件的原因。 這是您可以對網站進行更改的地方,它仍會為您提供所需的響應式設計。

這是它的工作小提琴


Answer #9

我知道這是一個舊線程,但我遇到了與內聯表單相同的問題,並且上述選項都沒有解決問題。 所以我修復了我的內聯表單,如下所示: -

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

那是我的解決方案。 有點hacky黑客,但做了一個內聯形式的工作。


Answer #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中,輸入,選擇和textareas默認為100%。 要使用內聯表單,您必須在其中使用的表單控件上設置寬度。

所以另一個選擇是使用CSS設置特定的寬度:

.form-control {
    width:100px;
}

或者,將col-sm-*應用於“form-group”。


Answer #11

當前的文檔聲稱使用.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/


Answer #12
<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中以約束輸入





twitter-bootstrap-3