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

有关详细信息，请参阅here。