0

TwitterBootstrapを使用して画像グリッドを作成しています。これはHTMLコードです：

<div class="container">
  <div class="row">
    <ul class="thumbnails">
      <li class="span6">
        <a href="x" class="thumbnail">
          <img src="http://www.loremipsum.com" />
        </a>
      </li>
    </ul>
  </div><!-- /.row -->
</div><!-- /.contaner -->

問題：

そのグリッドはページの中央に配置されておらず、左マージンは常に右マージンよりも小さくなっています。

私はすでにtext-align: center親要素に設定しようとしました：運がありません。

私も試しました

.thumbnails { text-align:center; }
.thumbnails > li > a { display: inline-block; float: none; }

何だと思う？運が悪い！

オフセットを操作しても効果はありません。

このグリッドを中央に配置するにはどうすればよいですか？必要に応じて、スクリーンショットを提供できます。

また、リンクから境界線を削除する方法はありますか？ですでにコメントアウトしましたthumbnails.lessが、どういうわけかコンパイラエラーが発生しました。

4

2 に答える 2

2

これは、何が起こっているかを示すために .row と .container の背景色を使用した簡単な jsfiddle ( jsfiddle ) です。コード構造で2つのspan6を使用しました。1つのspan6のみが必要な場合は、もう1つを削除してください。ボーダーに関しては、ボックス シャドウがボーダーの外観に関与するため、ボックス シャドウと .thumbnail クラスのボーダーの両方を調整する必要があります。

これは、 s/ s を使用しない別の jsfiddle ( 2nd jsfiddle ) ですが、クラスを使用してグリッド内に配置します。このバージョンでは、サムネイルは span6 の中央に配置されます。ulli.row-fluid.thumbnails

この最後の例 ( 3 番目の jsfiddle ) では.row-fluid、カスタム クラスを使用し.thumbnail-containerて、サムネイルをラップし、グリッド内の中央に配置します。.row-fluida をレギュラー内にネストする場合は、流動的な行に.rowa を使用し.span12て、それが入っているコンテナーの幅全体にまたがる必要があることに注意してください。これは、流動的な行がパーセンテージを使用するためです。

これらの例の 1 つが答えにつながることを願っています。ご希望どおりに動作させるお手伝いはできますが、詳細をお知らせいただく必要があります。私が行ったフィドルが役に立たなかった場合は、何が機能していないのかを詳しく教えてください。残りの方法で解決できるようにします。具体的には、各行にいくつのサムがあり、どのサイズですか (関係ありませんが、例には役立ちます)、2 つの span6 を使用していますか? 基本的に2列？または、画像に1つのspan6のみを使用していますか? そのようなもの。

于 2012-07-20T01:15:36.447 に答える
0

すみません。今それを手に入れました、それは私が愚かだっただけでした。rowTwitter Bootstrapを始めたすべての人に私がお勧めできることの1つは、と`row-fluidの違いを知っていることです。;-)

于 2012-07-24T00:51:06.730 に答える