19

TwitterのBootstrapを使用しています。私が欲しいのは、追加されたテキスト、入力フィールド、およびボタンを作成することですが、送信ボタンの右端がウェルの右端に近くなるように、入力フィールドに使用可能な最大幅を持たせたいです。ブートストラップのドキュメントから、任意の要素または要素をブロックレベルの要素のように動作させる.input-block-levelクラスがありますが、それを入力に適用すると、結果として中央入力にウェルのサイズが与えられます。http://jsfiddle.net/Uc4CE/

<div class="well">
<div class="input-prepend input-append">
  <span class="add-on">Some text</span>
  <input class="input" type="text" name="xxx" value="xxx" />
  <input type="hidden" name="next" value="xxx" />
  <input type="submit" value="xx" class="btn btn-info" />
</div>
</div>
4

4 に答える 4

14

編集：この回答はBootstrapv2.3.xに有効であることに注意してください。Bootstrap 3はすでにこれをネイティブに解決しています（ドキュメントを参照）。

A leeの答えに触発されて、これが私のちょっと改善されたソリューションです（追加と追加の両方、可能な最小のアドオン幅、削除された不要なスタイル、自動高さなどが含まれます）。Bootstrap CSS/LESSファイルの後にこれを含めます。

.input-append.input-block-level,
.input-prepend.input-block-level {
  display: table;
}

.input-append.input-block-level .add-on,
.input-prepend.input-block-level .add-on {
  display: table-cell;
  width: 1%; /* remove this if you want default bootstrap button width */
}

.input-append.input-block-level > input,
.input-prepend.input-block-level > input {
  box-sizing: border-box; /* use bootstrap mixin or include vendor variants */
  -moz-box-sizing: border-box; /* for Firefox */
  display: table; /* table-cell is not working well in Chrome for small widths */
  min-height: inherit;
  width: 100%;
}

.input-append.input-block-level > input {
  border-right: 0;
}

.input-prepend.input-block-level > input {
  border-left: 0;
}

HTMLでこのように使用し、この場合はボタンではなくタグを使用する必要がaあることを忘れないbuttonでください。

<div class="input-append input-block-level">
  <input type="text" />
  <a class="btn add-on">click</a>
</div>

編集： IE8では、を設定display: tableする.input-append.input-block-level > inputと、フォーカスを取得しても入力タグは編集できなくなります。

このパラメーターを完全に省略display:すると、IE8および現在のChrome / Safari/Firefoxで期待どおりに機能します。

于 2013-07-04T09:03:49.770 に答える
12

私は似たようなものを探していましたが、https：//gist.github.com/mattjorn/5020957からのこのソリューションは私のために働きました-あなたの外側のdivに追加.input-block-levelしてください、例えば、

<div class="input-prepend input-append input-block-level">

次に、ブートストラップCSSを次のように拡張します。

.input-prepend.input-block-level {
  display: table;
  width: 100%;
}

.input-prepend.input-block-level .add-on {
  display: table-cell;
  background-color: white;
}

.input-prepend.input-block-level > input {
  box-sizing: border-box;
  height: 30px;
  display: table-cell;
  width: 100%;
  border-left-style: none;
}
于 2013-04-02T22:07:15.767 に答える
3

div class="input-prepend input-append"追加のスタイルに使用できますmargin-right

コードの結果：

<div class="well">
    <div class="input-prepend input-append" style="margin-right: 108px;">
        <span class="add-on">Some text</span>
        <input class="input-block-level" type="text" name="xxx" value="xxx" />
        <input type="hidden" name="next" value="xxx" />
        <input type="submit" value="xx" class="btn btn-info" />
    </div>
</div>

http://jsfiddle.net/Uc4CE/1/

于 2012-11-09T11:05:14.487 に答える
0

この問題に関する@mdoのコメントに従って、TwitterBootstrapの3.0ブランチでこれに対する修正があります。

ただし、その間にdjango-crispy formsレイアウトを出力するときは、プロジェクトで次のjavascriptを使用します<div class="span4">。これはレスポンシブデザインを説明しています。

HTMLの例

<div class="row-fluid">
    <div class="span4">
        {% crispy form %}
    </div>
</div>

style.css

/* I also set this to account for smaller widtsh */

form fieldset {
    width:100%
}

fix.js

注：ウィンドウのサイズ変更でもこれをトリガーします。

function sizeInputs（）{
var fw = $（'form fieldset'）。innerWidth（）;
$（'form .input-prepend'）。each（function（）{$（this）.children（'input'）。css（'width'、fw-$（this）.children（'。add-on' ）.innerWidth（））;}）; };

$（document）.ready（function（）{sizeInputs（）;}）;

$（window）.resize（function（）{sizeInputs（）;}）;

于 2013-04-18T06:24:36.537 に答える