0

この例を作成しました: jsFiddle

<div class="container">
  <div class="row">
    <div class="span6">
    <ul class="thumbnails">
        <li class="span4">
            <div style="height:200px; position: relative" class="thumbnail">
                <div style="position: absolute; left: 5px; right: 5px; bottom:5px;">
                    <form style="margin:0;" class="form-inline">
                        <input style="margin: 3px 0 0 0;" type="text" placeholder="Name…" ng-model="mashName" class="pull-left span3" />
                        <button type="submit" style="margin: 3px 0 0 0; " class="span1 btn btn-primary pull-right">Create</button>
                    </form>
                </div>
            </div>
        </li>
    </ul>
</div>

私が必要とするのは、サイズ変更時にすべてを台無しにするパーセンテージを使用せずに、入力をボタンまで拡張することです。この例は非常に近いですが、スパンを使用してボタンをねじ込みます。

.input-block-levelいいですが、ずっと伸びています..代わりに、ボタンの直前で停止する必要があります。JavaScriptを使わずにこれを修正する方法はありますか?

4

1 に答える 1

0

最初に、ブートストラップが入力フィールドに配置する幅をオーバーライドして削除する必要があります。width: auto次に、絶対配置を使用して適切な幅を指定します..含まれる div の幅に合わせます。

私はこれの jsFiddle を作成しました: http://jsfiddle.net/w8YfL/

コードは次のとおりです。

<div class="container">
    <ul class="thumbnails">
        <li class="span4">
            <div style="height:200px; position: relative" class="thumbnail">
                <div style="position: absolute; left: 5px; right: 5px; bottom:5px;">
                    <form style="margin:0;" class="form-inline">
                        <input style="position: absolute; right: 70px; left: 0; bottom: 0; width: auto;" type="text" placeholder="Name…" ng-model="mashName"/>
                        <button type="submit" style="position: absolute; right: 0; bottom: 0;" class="btn btn-primary">Create</button>
                    </form>
                </div>
            </div>
        </li>
    </ul>
</diV>
于 2013-08-23T20:39:23.880 に答える