1

どう対処すればいいのかわからない問題に直面しています。私はBootStrap 3に取り組んでおり、完全な垂直フォームよりもユーザーフレンドリーであるため、インラインフォームを作成しようとしています(これまでスクロールしたくありません)

通常の入力をインライン化する方法を見つけましたが、アイコン ( font awesome) を含む入力に関しては、それらをインライン化する方法を理解できますが、それらの間にスペースを入れずに左右にインライン化します。また、通常の入力のように幅を変更する方法がわかりません(col-sm-4たとえば)。

「メール」と「電話」をスケープして幅を変えてほしい

私のコードとそれを説明する次の画像を見てください: http://www.bootply.com/T8w3oRE3Sn

ここに画像の説明を入力

4

3 に答える 3

3

フォーム グループで欠けていたものがいくつかあったので、まとめました。 Hope it will help you :)

以下は作業スニペットです。

.myform .form-inline .input-group .input-group-addon{ width:20px;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row myform">
  <div class="col-xs-12">
    <form name="myform" role="form" novalidate>

      <div class="form-inline ">
        <div class="form-group col-xs-6">
          <div class="input-group col-xs-12">
            <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
            <input type="email" class="form-control" placeholder="Email de l'interlocuteur">
          </div>
        </div>
        <div class="form-group col-xs-6">
          <div class="input-group col-xs-12">
            <span class="input-group-addon"><i class="fa fa-phone"></i></span>
            <input type="email" class="form-control" placeholder="Téléphone de l'interlocuteur">
          </div>
        </div>
      </div>

    </form>
  </div>

</div>

于 2017-04-25T09:19:25.287 に答える