0

私のウェブサイトでは、スパンタグを使用してボタンを引き、Twitterブートストラップモーダルディスプレイのフッターからテキスト入力を残しました。写真にこれが表示されます。

どういうわけか、左側の2つのボタンと右側の2つのボタンよりも低いボタンですが、どうすれば左側の2つのボタンを上げることができますか？HTML：

CSS：

.modal-footer .floatLeft {
    float: left;
}

HTML：

<div class="modal-footer">
    <span class="floatLeft">
        <input placeholder="out of" class='changeMaxMark' style='margin-top:9px;'id='maxMarkBox' name='maxMarkBox' type='text'>
        <button  id='changeMaxMark' name='changeMaxMark' class='btn btn-success'> Set All </button>
    </span>
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary" id="markSave" onClick="togleMarkSave()">Save Changes</button>
</div>

写真1へのリンク（http://snag.gy/i5FRT.jpg）写真2へのリンク（http://snag.gy/2Y9Q2.jpg）

4

1 に答える 1

1

まず、スパンを削除します。Bootstrapには、物事を左に引っ張るための特定のCSSクラスがあります。pull-leftこれを最初の2つの要素に追加しました。

編集されたHTMLは次のとおりです。

<div class="modal-footer">    
    <input placeholder="out of" class='changeMaxMark pull-left' id='maxMarkBox' name='maxMarkBox' type='text'>
    <button  id='changeMaxMark' name='changeMaxMark' class='btn btn-success  pull-left'> Set All </button>
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary" id="markSave" onClick="togleMarkSave()">Save Changes</button>
</div>

また、入力フィールドに特定のスタイルを設定して、不要なマージントップダウン9pxをプッシュしました。

カスタムCSSクラスや追加のマークアップは必要ありません。

これが動作中のJSFiddleです

于 2013-03-06T20:45:14.913 に答える