Bootstrap文本字段不會100％

Question

我試圖讓面板中嵌入的Bootstrap文本字段在面板中保持100％的剩余空間寬度。 但這就是我得到的：

藍色邊框是面板的邊緣。

這是我的代碼：

<div class="input-group ">
    <div class="input-group input-group-lg">
        <a id="pdfUrlButton" class="input-group-btn btn btn-default go inline"><span class="glyphicon glyphicon-folder-open"></span>Bestand kiezen </a>
        <input id="pdfLoc" type="text" class="form-control disabled" placeholder="Nog geen rooster gekozen">
        <input type="file" name="pdfUrl" id="pdfUrl" class="hidden"/>
    </div>
    <div id="pdfAlert" class="alert alert-danger hide">Dit is geen PDF!</div>
</div>

我知道這個問題會被問到很多，但我根本無法使用找到的答案。

Answer 1

.input-group {
    display: block;
}

但是你很可能想讓你的css中的選擇更加具體，所以這並不適用於這個類的所有元素，除非這是你想要的風格

Answer 2

嘗試將代碼包裝在div行中並指定完整行（12列）：

<div class="row">
        <div class="input-group col-xs-12">
            <div class="input-group input-group-lg">
                <a id="pdfUrlButton" class="input-group-btn btn btn-default go inline"><span class="glyphicon glyphicon-folder-open"></span>Bestand kiezen </a>
                <input id="pdfLoc" type="text" class="form-control disabled" placeholder="Nog geen rooster gekozen">
                <input type="file" name="pdfUrl" id="pdfUrl" class="hidden" />
            </div>
            <div id="pdfAlert" class="alert alert-danger hide">Dit is geen PDF!</div>
        </div>
    </div>

Answer 3

我最終用他們自己的組件指南中的一個例子來修復它：

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

詳情請見此處 。