css - ブートストラップ入力用の親コンテナの完全な100％幅？

Question

Bootstrap入力フィールドをその親と正確に100％幅にする方法を教えてください。

steve-obrienがBootstrapIssue＃1058で書いたように：

100％に設定すると、パディングが考慮されないため、入力フィールドに直接適用した場合は機能しません。したがって、最終的にはコンテナの100％に加えて入力ボックスのパディングが発生するため、入力ボックスは通常、コンテナの外側で壊れます。

そのチケットはさまざまな解決策を提供しますが、私はそれを行うための最良の方法を探しています-できればBootstrapによってすでに提供されているCSSクラスです。

score 108 · Accepted Answer

クラスを適用すると、input-block-levelさまざまな画面幅でうまく機能します。これは、 Bootstrapmixins.lessによって次のように定義されています。

// Block level inputs
.input-block-level {
  display: block;
  width: 100%;
  min-height: 28px;        // Make inputs at least the height of their button counterpart
  .box-sizing(border-box); // Makes inputs behave like true block-level elements
}

これは、問題＃1058に関する彼のコメントで「アセンブラ」によって提案されたスタイルと非常に似ています。

score 22 · Accepted Answer

ボックスサイズを追加するだけです。

input[type="text"] {
    box-sizing: border-box;
}

score 10 · Accepted Answer

C＃ASP.NET MVCのデフォルトテンプレートを使用している場合、site.cssが一部のBootstrapsスタイルをオーバーライドしていることがあります。私が行ったように、Bootstrapを使用したい場合は、（あなたの知らないうちに）M $でこれをオーバーライドすることは、大きなフラストレーションの原因となる可能性があります。不要なスタイルを自由に削除してください...

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

score 8 · Accepted Answer

これをグーグルする人にとって、1つの提案はすべてのinput-groupクラスインスタンスを削除することです。同様の状況で私のために働いた。元のコード：

<form>
  <div class="bs-callout">
    <div class="row">
      <div class="col-md-4">
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" name="time" placeholder="Time">
          </div>
        </div>
      </div>
      <div class="col-md-8">
        <div class="form-group">
          <div class="input-group">
            <select name="dtarea" class="form-control">
              <option value="1">Option value 1</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="input-group">
        <input type="text" name="reason" class="form-control" placeholder="Reason">
      </div>
    </div>
  </div>
</form>

新しいコード：

<form>
  <div class="bs-callout">
    <div class="row">
      <div class="col-md-4">
        <div class="form-group">
          <input type="text" class="form-control" name="time" placeholder="Time">
        </div>
      </div>
      <div class="col-md-8">
        <div class="form-group">
          <select name="dtarea" class="form-control">
            <option value="1">Option value 1</option>
          </select>
        </div>
      </div>
    </div>
    <div class="row">
      <input type="text" name="reason" class="form-control" placeholder="Reason">
    </div>
  </div>
</form>

score 5 · Accepted Answer

私の場合にうまくいく解決策を見つけました：

<input class="form-control" style="min-width: 100%!important;" type="text" />

最小幅セットを100％オーバーライドするだけで重要であり、結果は次のようになります。

あなたがそれを適用しない場合、あなたは常にこれを得るでしょう：

score 3 · Accepted Answer

目的の結果を得るには、「box-sizing：border-box」とデフォルトの「box-sizing：content-box」を設定する必要があります。これはまさにあなたが言及している問題です（MDNから）：

コンテンツボックス

これは、CSS標準で指定されている初期値とデフォルト値です。幅と高さのプロパティは、コンテンツのみを含めて測定され、パディング、境界線、マージンは含まれません。

ボーダーボックス

幅と高さのプロパティには、コンテンツ、パディング、境界線が含まれますが、余白は含まれません。」

参照：https ：//developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

このCSSとの互換性は良好です。

score 1 · Accepted Answer

.container-fluid親として全幅にしたい場合は、ビューポートの全幅にまたがるを使用します。

score 0 · Accepted Answer

どうですか？

    input[type="text"] {
          max-width:none;
   }

一部のcssファイルが問題を引き起こしていることを確認します。デフォルトでは、ブートストラップは幅全体に表示されます。たとえば、MVCディレクトリのコンテンツはsite.cssであり、幅を制限する定義があります。

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

score -1 · Accepted Answer

-1

追加するだけです：

width: 100% !important;

于 2014-10-10T03:46:29.890 に答える

css - ブートストラップ入力用の親コンテナの完全な100％幅？

9 に答える 9

コンテンツボックス

ボーダーボックス

Related

Reference