アドオンボックスのブートストラップを調整するにはどうすればよいですか-html

レイsn0w

ここでの私の問題は、私の「OCD」が私を殺しているということです。

https://jsfiddle.net/3esrpdLt/1/

<table style="width:100%;">
<tr>
    <td class="quoteprice">
        <div class="form-group">
            <label>Subtotal: &nbsp;</label>
        </div>
    </td>
    <td>
        <div class="input-group">
            <div class="input-group-addon currency">$</div>
            <input value="<?php echo isset($invoice['data']['subTotal']) ? $invoice['data']['subTotal']: ''; ?>" type="number" class="form-control" name="data[subTotal]" id="subTotal" placeholder="Subtotal" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
        </div>
    </td>
</tr>
<tr>
    <td class="quoteprice">
        <div class="form-group">
            <label>ITBIS: &nbsp;</label>
        </div>
    </td>
    <td>
        <div class="input-group">
            <div class="input-group-addon currency">$</div>
            <input value="<?php echo isset($invoice['data']['subTotal']) ? $invoice['data']['subTotal']: ''; ?>" type="number" class="form-control" name="data[subTotal]" id="subTotal" placeholder="Subtotal" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
        </div>
    </td>
</tr>
<tr>
    <td class="quoteprice">
        <div class="form-group">
            <label>Descuento: &nbsp;</label>
        </div>
    </td>
    <td>
        <div class="input-group">
            <div class="input-group-addon currency">%</div>
            <input value="<?php echo isset($invoice['data']['subTotal']) ? $invoice['data']['subTotal']: ''; ?>" type="number" class="form-control" name="data[subTotal]" id="subTotal" placeholder="Subtotal" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
        </div>
    </td>
</tr>
<tr>
    <td class="quoteprice">
        <div class="form-group">
            <label>Total: &nbsp;</label>
        </div>
    </td>
    <td>
        <div class="input-group">
            <div class="input-group-addon currency">$</div>
            <input value="<?php echo isset($invoice['data']['subTotal']) ? $invoice['data']['subTotal']: ''; ?>" type="number" class="form-control" name="data[subTotal]" id="subTotal" placeholder="Subtotal" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
        </div>
    </td>
</tr>

jsfiddleでわかるように、問題は、「%」アイコンを使用すると、他のアイコンよりも少し大きくなることです。これを防ぐ方法はありますか?

タオ

それらをすべて大きくしたい場合は、これをCSSに追加します。

.input-group-addon {
    min-width: 40px;
}

または、%トリミングする場合は、次を使用します。

.input-group-addon {
    max-width: 33px;
}

これあなたが望むものですか?

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

HTMLドキュメントでボタンにアラートボックスを表示させるにはどうすればよいですか?

分類Dev

HTMLにブートストラップポップオーバーバインディングを追加するにはどうすればよいですか?

分類Dev

[HTML]ボタンをクリックしてストアドプロシージャを実行するにはどうすればよいですか?

分類Dev

ドロップダウンリストを含むHTMLダイアログボックスを作成するにはどうすればよいですか?

分類Dev

テキストボックスのコンテンツをデータベースに保存するにはどうすればよいですか?テキストボックスはHTMLとCSSでプログラムされています

分類Dev

iPhoneのように、HTMLテキスト入力ボックス内にクリアボタンを配置するにはどうすればよいですか?

分類Dev

選択したプランの値をvuejs htmlのテキストボックスに表示するにはどうすればよいですか?

分類Dev

JupyterLabの[ノートブックを名前を付けてエクスポート...]メニューの[ノートブックをHtml_tocにエクスポート]オプションを取得するにはどうすればよいですか?

分類Dev

ボタンクリックイベントがアクティブなhtmlを変更した後、単体テスト内のスコープのhtmlを更新するにはどうすればよいですか?

分類Dev

ブートストラップ対応のHTMLテーブルの要素間にスペースを追加するにはどうすればよいですか?

分類Dev

Javaを使用して、ユーザーのキーアップアクションに応答するHTMLテキストボックスにテキストを配置するにはどうすればよいですか?

分類Dev

4つのテキストボックス値をHTMLのテキストエリアにコピーするにはどうすればよいですか?

分類Dev

クリックイベントの実行時にhtmlボタンのクラスを変更するにはどうすればよいですか?

分類Dev

ユーザーがLotusNotesのアドレスブックから情報を選択できるように、Webブラウザ(HTML)でダイアログリストを表示するにはどうすればよいですか。

分類Dev

テキストボックスをhtmlテーブルのtdタグの中央に設定するにはどうすればよいですか?

分類Dev

FTPクライアントを介して別のHTMLファイルをワードプレスサイトにアップロードするにはどうすればよいですか?

分類Dev

HTML、「テキストボックス」の高さを知るにはどうすればよいですか?

分類Dev

HTMLコントロールをブートストラップで整理するにはどうすればよいですか?

分類Dev

html / css / javascriptで複数のテキストボックスをより速くコーディングするにはどうすればよいですか?

分類Dev

ユーザーがブートストラップhtmlの各コンポーネントをクリックしたときに、ブートストラップ折りたたみ可能コンポーネントからモデルにデータを送信するにはどうすればよいですか?

分類Dev

CSSにしかアクセスできない(HTMLを変更する方法がない)場合、ブートストラップの列幅を変更するにはどうすればよいですか?

分類Dev

HTMLでテキストボックスを非表示にするにはどうすればよいですか

分類Dev

HTMLブートストラップで2つのdivを中央に配置するにはどうすればよいですか?

分類Dev

HTMLのボックスにボックスを作成するにはどうすればよいですか

分類Dev

ボックスのレイアウトを確認するために、ブラウザでHTMLページの要素の輪郭を描くにはどうすればよいですか?ユーザーエージェントのスタイルシートを変更しますか?

分類Dev

ボックスのレイアウトを確認するために、ブラウザでHTMLページの要素の輪郭を描くにはどうすればよいですか?ユーザーエージェントのスタイルシートを変更しますか?

分類Dev

この特定のケースでHTML5キャンバスに円を再描画するにはどうすればよいですか?(メソッド呼び出しとコンテキストオブジェクトの直接使用)

分類Dev

ajaxライブ検索からHTMLテキストボックスに値を取得するにはどうすればよいですか?

分類Dev

WordPressの外部スクリプトで生成されたダイナミックHTMLテーブルを表示するにはどうすればよいですか?

Related 関連記事

  1. 1

    HTMLドキュメントでボタンにアラートボックスを表示させるにはどうすればよいですか?

  2. 2

    HTMLにブートストラップポップオーバーバインディングを追加するにはどうすればよいですか?

  3. 3

    [HTML]ボタンをクリックしてストアドプロシージャを実行するにはどうすればよいですか?

  4. 4

    ドロップダウンリストを含むHTMLダイアログボックスを作成するにはどうすればよいですか?

  5. 5

    テキストボックスのコンテンツをデータベースに保存するにはどうすればよいですか?テキストボックスはHTMLとCSSでプログラムされています

  6. 6

    iPhoneのように、HTMLテキスト入力ボックス内にクリアボタンを配置するにはどうすればよいですか?

  7. 7

    選択したプランの値をvuejs htmlのテキストボックスに表示するにはどうすればよいですか?

  8. 8

    JupyterLabの[ノートブックを名前を付けてエクスポート...]メニューの[ノートブックをHtml_tocにエクスポート]オプションを取得するにはどうすればよいですか?

  9. 9

    ボタンクリックイベントがアクティブなhtmlを変更した後、単体テスト内のスコープのhtmlを更新するにはどうすればよいですか?

  10. 10

    ブートストラップ対応のHTMLテーブルの要素間にスペースを追加するにはどうすればよいですか?

  11. 11

    Javaを使用して、ユーザーのキーアップアクションに応答するHTMLテキストボックスにテキストを配置するにはどうすればよいですか?

  12. 12

    4つのテキストボックス値をHTMLのテキストエリアにコピーするにはどうすればよいですか?

  13. 13

    クリックイベントの実行時にhtmlボタンのクラスを変更するにはどうすればよいですか?

  14. 14

    ユーザーがLotusNotesのアドレスブックから情報を選択できるように、Webブラウザ(HTML)でダイアログリストを表示するにはどうすればよいですか。

  15. 15

    テキストボックスをhtmlテーブルのtdタグの中央に設定するにはどうすればよいですか?

  16. 16

    FTPクライアントを介して別のHTMLファイルをワードプレスサイトにアップロードするにはどうすればよいですか?

  17. 17

    HTML、「テキストボックス」の高さを知るにはどうすればよいですか?

  18. 18

    HTMLコントロールをブートストラップで整理するにはどうすればよいですか?

  19. 19

    html / css / javascriptで複数のテキストボックスをより速くコーディングするにはどうすればよいですか?

  20. 20

    ユーザーがブートストラップhtmlの各コンポーネントをクリックしたときに、ブートストラップ折りたたみ可能コンポーネントからモデルにデータを送信するにはどうすればよいですか?

  21. 21

    CSSにしかアクセスできない(HTMLを変更する方法がない)場合、ブートストラップの列幅を変更するにはどうすればよいですか?

  22. 22

    HTMLでテキストボックスを非表示にするにはどうすればよいですか

  23. 23

    HTMLブートストラップで2つのdivを中央に配置するにはどうすればよいですか?

  24. 24

    HTMLのボックスにボックスを作成するにはどうすればよいですか

  25. 25

    ボックスのレイアウトを確認するために、ブラウザでHTMLページの要素の輪郭を描くにはどうすればよいですか?ユーザーエージェントのスタイルシートを変更しますか?

  26. 26

    ボックスのレイアウトを確認するために、ブラウザでHTMLページの要素の輪郭を描くにはどうすればよいですか?ユーザーエージェントのスタイルシートを変更しますか?

  27. 27

    この特定のケースでHTML5キャンバスに円を再描画するにはどうすればよいですか?(メソッド呼び出しとコンテキストオブジェクトの直接使用)

  28. 28

    ajaxライブ検索からHTMLテキストボックスに値を取得するにはどうすればよいですか?

  29. 29

    WordPressの外部スクリプトで生成されたダイナミックHTMLテーブルを表示するにはどうすればよいですか?

ホットタグ

アーカイブ