3

私は Bootstrap 3 を使用しており、主にモバイル Web サイトのコーディングを行っています。行全体を占めたくないコンテンツを中央に配置するのに苦労しています。画面が特定の幅よりも大きい場合、中央に配置されず、その幅よりも小さい場合 (特に、最適化するサイズで)、画面の左端から離れることさえありません。ページ。また、一部の要素は、特定のサイズになるとサイズがジャンプし続けます。最後の 1 つは通常の動作だと思いますが、私の人生では理由を理解できません。

HTML:

<div class="col-xs-12">
    <div class="container">
        <div class="form-group col-xs-11">
            <div class="col-xs-5 pull-left">
                <input type="text" class='form-control' id="firstName" name="firstName" placeholder="First Name" required />
            </div>
            <div class="col-xs-5 pull-right">
                <input type="text" class='form-control' id="lastName" name="lastName" placeholder="Last Name" required />
            </div>
        </div>
    </div>
    <div class="form-group">
        <input type="email" class='form-control' id="email" name="email" placeholder="Email" required />
    </div>
</div>

bootstrap-custom.css の @media は次のとおりです。

@media (min-width 1200)
    .container {
        max-width: 1140px;
    }
@media (min-width 992)
    .container {
        max-width: 940px;
    }
@media (min-width 768)
    .container {
        max-width: 720px;
    }
.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 0;
    padding-right: 0;
}

それがそれらを引用する正しい/受け入れられる方法であるかどうかはわかりません。

回答に必要な場合は、bootstrap-custom.css の残りの部分もあります。

PS最初の行（firstNameとlastNameを含む）が行全体を占めていなかった理由は、そうしたくないからです。私はその行が真ん中にあり、両側にスペースが欲しいと思っていました.

PPS ここにフィドルがあります。

4

3 に答える 3

0

免責事項：私は以前にブートストラップを行ったことがありません-私は暗闇の中で刺しているだけです.

単純な 2 列のレイアウトの場合.rowは、適切な数の.span*列を作成して追加します。これは 12 列のグリッドであるため、それぞれ.span*がこれらの 12 列の数にまたがり、各行 (または親の列の数) に対して常に最大 12 を追加する必要があります。

そのため、要素を合計して 12 になり、行の幅の 100% を占めるようにcol-xs-5要素を変更しました。col-xs-6メール入力フィールドを に移動し、クラス.containerを追加して、他の の左右の余白をミラーリングしました。メール入力フィールドを(他のフィールドで行ったように) でラップし、クラスを追加して、親行の幅の 100% に拡張しました。col-xs-11form-groupdivcol-xs-12

ここにフィドルがあります。

また、一部の要素は、特定のサイズになるとサイズがジャンプし続けます。最後の 1 つは通常の動作だと思いますが、私の人生では理由を理解できません。

これは、 CSS3トランジションを使用して異なるs間を容易にする更新されたフィドルです。max-width

于 2013-10-08T05:16:37.293 に答える
0

マークアップを少し変更する必要があると思います。すべてを a 内にラップし、 as 行containerを作成します。form-group

例えば：

<div class="container">
  <div class="col-xs-12">
      <div class="row form-group">
        <div class="col-xs-6">
          <input type="text" class="form-control" id="firstName" name="firstName" placeholder="First Name" required="">
        </div>
        <div class="col-xs-6 pull-right">
          <input type="text" class="form-control" id="lastName" name="lastName" placeholder="Last Name" required="">
        </div>
      </div>
      <div class="row form-group">
          <div class="col-xs-12">
          <input type="email" class="form-control" id="email" name="email" placeholder="Email" required="">
          </div>
      </div>
  </div>
</div>

実際のデモ: http://bootply.com/86294

PS -入力が小さくなりすぎないように、デモのオプション #2 を見てください。これにより、最小の画面で縦に積み重ねることができます。

于 2013-10-08T12:36:04.007 に答える