0

この間隔の問題は私を夢中にさせていました。最終的に、フォーム要素間にスペースを入れるには、以下に示すように HTML コードをフォーマットする必要があることがわかりました。

誰かがここで何が起こっているのか説明できますか? これは改行の問題ですか？

ノート：

  • Bootstrap 3 CSS ファイルを使用していますが、他のスタイルは設定されていません
  • 以下の 2 つのサンプルの唯一の違いは、.form-groupdiv のレイアウト方法です。

1. スペースを含むフォーム要素:

ここに画像の説明を入力

<!DOCTYPE html>
<html>
  <head>
    <title>Elements with spaces</title>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <form class="form-inline" role="form">
      <div class="form-group">
        <input type="email" class="form-control" placeholder="Enter email">
      </div>
      <div class="form-group">
        <input type="password" class="form-control" placeholder="Password">
      </div>
      <button type="submit" class="btn btn-default">Sign in</button>
    </form>
  </body>
</html>

2. スペースのないフォーム要素:

ここに画像の説明を入力

<!DOCTYPE html>
<html>
  <head>
    <title>Elements with spaces</title>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <form class="form-inline" role="form">
      <div class="form-group">
        <input type="email" class="form-control" placeholder="Enter email">
      </div><div class="form-group">
        <input type="password" class="form-control" placeholder="Password">
      </div><button type="submit" class="btn btn-default">Sign in</button>
    </form>
  </body>
</html>
4

3 に答える 3

3

インライン要素は、コード内の空白に敏感です。あなたの例には、通常はブロック レベルの要素である div がありますが、それらは並んで表示されているため、CSS はそれらをインラインで表示するように変更している可能性があります。HTML コメントを使用してギャップを削除することもできます。

<div class="form-group">
    <input type="email" class="form-control" placeholder="Enter email">
  </div><!--
  --><div class="form-group">
    <input type="password" class="form-control" placeholder="Password">
</div>
于 2013-10-10T19:36:34.923 に答える
1

Bootstrap ドキュメント ( http://getbootstrap.com/css/#forms-inline ) によると、form-groupをラップするform-controlために使用されるため、2 番目のアプローチの方が優れています。

Bootstrap CSS が設定さinline-blockれており、それ自体にマージンがないため、最初の例は期待どおりにレンダリングされていform-controlます。CSS でマージンを使用して、この動作をオーバーライドできます。

.form-inline .form-control {
  display: inline-block;
  margin-right:4px;
}

デモ: http://bootply.com/86947

于 2013-10-10T19:49:49.507 に答える
0

j08691の回答の代わりに、これは私が空白を防ぐために使用する方法です:

<div class="form-group">
    <input type="email" class="form-control" placeholder="Enter email">
</div
><div class="form-group">
    <input type="password" class="form-control" placeholder="Password">
</div>

不必要なコメントは導入しませんが、一部の IDE での自動書式設定により、インデントが少し混乱する可能性があります。

于 2014-03-11T14:43:58.383 に答える