0

ブートストラップ 3 へのアップグレードでは、私が取り組んでいるサイトの多くのレイアウトを修正する必要がありました。大部分はなんとか修正できましたが、ページの最後の要素が手が届かないようです。

私が問題を抱えているものの例を以下に示します。

http://1ro.co/shopfine/template.html

デスクトップ版に関しては、問題なく動作します。ただし、ページを水平方向に縮小すると (「モバイル」バージョンであることをシミュレートするため)、ボタンは次の 2 つの点でうまくいきません。

  1. タブレット サイズ (768px-979px) では、他のボタンとは一線を画していません。これはあいまいな幅の問題だと思いますが、特定できないようです。
  2. モバイル サイズ (<786px) では、検索バーとそれに対応するボタンが一致しません。むしろ、ボタンは右側にぶら下がっています。

ブートストラップ 3 に移行する前のサイトの例も以下に示します。

http://1ro.co/shopfine/account.html

タブレット版の問題（幅？）がわかりませんし、モバイル版は検索バー内のオブジェクトを浮かせても直らないようです。ブートストラップ 3 でこれら 2 つのことを修正します。

4

2 に答える 2

1

  1. 間違ったクラスを割り当てましcol-sm-2たcol-md-2。div#searchBar

  2. を失い、クラスをタグにdiv.input-fields追加し、次のようにフォーム要素に追加します。.form-inline<form>.form-group

    <form method="get" action="page" class="siteSearch form-inline"> <input type="text" id="appendedInputButton" placeholder="Search..." class="form-group"> <span class="input-group-btn form-group"> <button class="btn btn-primary" type="submit"> <i class="icon-search"></i> </button> </span> </form>

PS フォーマットについて申し訳ありません。何かが正しくありません。

編集

ブートストラップのドキュメントから:

Bootstrap では、入力、選択、およびテキストエリアはデフォルトで 100% 幅です。インライン フォームを使用するには、内部で使用されるフォーム コントロールに幅を設定する必要があります。

したがって、ドキュメンテーション ページのサンプル コードに従って、必要な.form-controlタグを追加し、それらに幅を割り当てます。

于 2013-10-11T04:08:22.557 に答える
1

input-groupクラスを列サイズでラップできます。

<div class="col-sm-12">
  <div class="input-group">
    <input type="text" placeholder="Search..." id="appendedInputButton" class="form-control">
      <span class="input-group-btn">
        <button type="submit" class="btn btn-primary">
          <i class="icon-search"></i>
        </button>
      </span>
  </div>
</div>

タグにform-controlclassを追加することを忘れないでください。input

于 2013-10-11T04:11:00.337 に答える