ホーム>source

ブートストラップ4を使用しています入力グループ 入力フィールドの横にアイコンを配置する機能。 input-group-append div(アイコンを含む)の固定幅を40ピクセルにしたいです。

ブートストラップドキュメントには、「個々の入力グループ要素のサイズ変更はサポートされていません」と書かれています。しかし、私はそれを行うCSSの方法がなければならないと確信しています:

<div class="form-group">
  <label>Some label</label>
  <div class="input-group">
    <input type="text" class="form-control"/>
    <div class="input-group-append">
      <i class="icon"></i>
    </div>
  </div>
</div>

どのように私はそれを行うことができますか?

あなたの答え
  • 解決した方法 # 1

    !important を使用してみてください  オーバーライドを防ぐために

    .input-group-append{
    width:40px!important;
    }
    
    
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <div class="form-group">
      <label>Some label</label>
      <div class="input-group">
        <input type="text" class="form-control"/>
        <div class="input-group-append">
          <i class="icon">icon</i>
        </div>
      </div>
    </div>
    
    

関連記事

  • 前へ java - JPAクエリ:サブクエリをグループ化条件に結合する
  • 次へ c++ - boost - : hash_combineで実行される1つのプログラムの間にのみ保証される決定性