9

私は、このばかげたバグを修正しようとしていることを認めるのに、これまで以上に多くの時間を費やしてきました。一部のコンテンツの左側に表示されるフォームがあります。広い画面と狭い画面では問題ないように見えますが、タブレットの幅（770〜950程度のオーバーレイ）では、右側のコンテンツがフォームフィールドと重なっています。

Twitter Bootstrapを適切に使用するためにマークアップに何かが欠けていますか、それともブレークポイントを使用してカスタムスタイルを追加して修正する必要がありますか？固定ピクセル幅がbootstrap.cssで定義された問題を引き起こしているようです。流体レスポンシブレイアウトを使用しているので、これらの幅プロパティは％を使用するべきではありませんか？ここに画像の説明を入力してください

<div class="container-narrow">
  <div class="content">
    <div class="row-fluid">
      <div class="span5">
        <form class="form-horizontal" id="applies-Step1-form" action="/" method="post">
          <div class="control-group">
            <label class="control-label required" for="Step1_email">Email <span class="required">*</span></label>
            <div class="controls">
              <input size="60" maxlength="255" name="Step1[email]" id="Step1_email" type="text" />
            </div>
          </div>

          <div class="control-group">
            <label class="control-label required" for="Step1_home_zip">Home Zip <span class="required">*</span></label>
            <div class="controls">
              <input size="5" maxlength="5" name="Step1[home_zip]" id="Step1_home_zip" type="text" />
            </div>
          </div>
        </form>
      </div>

      <div class="span7">
        <div class="promo-btm">
          <h2>Heading 2</h2>
          <ul class="checks">
            <li>Bullet One</li>
            <li>Bullet Two</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

バグについては添付のスクリーンショットを参照するか、私のフィドルを使用して自分で再現することができます。

誰かがこれを修正する方法を指摘するのを手伝ってくれるなら、私は非常に感謝しています！

4

3 に答える 3

5

入力要素に幅を追加するだけで、すべての画面サイズに対応できるようになります。.span12入力要素の幅のようなものを使用できます。これで問題が解決するはずです。

HTML 

<div class="container-narrow">
  <div class="content">
    <div class="row-fluid">
      <div class="span5">
        <form class="form-horizontal" id="applies-Step1-form" action="/" method="post">
          <div class="control-group">
            <label class="control-label required" for="Step1_email">Email <span class="required">*</span></label>
            <div class="controls">
              <input class="span12" size="60" maxlength="255" name="Step1[email]" id="Step1_email" type="text" />
            </div>
          </div>

          <div class="control-group">
            <label class="control-label required" for="Step1_home_zip">Home Zip <span class="required">*</span></label>
            <div class="controls">
              <input class="span12" size="5" maxlength="5" name="Step1[home_zip]" id="Step1_home_zip" type="text" />
            </div>
          </div>
        </form>
      </div>

      <div class="span7">
        <h2>Heading 2</h2>
        <ul class="checks">
          <li>Bullet One</li>
        </ul>
      </div>
    </div>
  </div>
</div>

デモ： http： //jsfiddle.net/yR7Ap/18/

于 2013-01-18T00:04:01.953 に答える
1

他の投稿は、問題の根本的な原因を特定しています。デフォルトのブートストラップcssを使用したspan5divにはフォームが広すぎるということです。

しかし、それを適合させることはそれほど難しくありません。これが役立つかどうかを確認してください：http：//jsfiddle.net/panchroma/FXXaZ/

私はこのCSSであなたのフォームを引き締めました：

/* pull control label left */
.form-horizontal .control-label {
width:70px; /* default 160 */
}

/* pull input box left */
.form-horizontal .controls {
margin-left: 90px; /* defaul 180 */
}

/* shorten input box  */
input, textarea, .uneditable-input {
width: 180px; /* default 206 */
}

幸運を！

于 2013-01-18T00:30:59.390 に答える
0

フォームが.span5列に対して広すぎます。上記にこれを追加してみてください：

<div class="row-fluid">
  <div class="span5">hello</div>
  <div class="span7">world</div>
</div>

次のスタイルを追加します。

.row-fluid > div { outline: 5px solid green; }

そして、あなたは私が何を意味するかを見るでしょう。

于 2013-01-17T23:53:46.587 に答える