0

やあ、

これが私がやろうとしていることです：

各サムネイルのコンテンツを中央に配置します：（img +キャプション）。 私の画像はspan3で、キャプションはspan4である必要があります。

これが私の問題です：

コンテンツセンター、またはimgの横にあるキャプションフロートを取得できます。 しかし、両方を同時に取得することはできません。

私は今朝ブートストラップを使い始めたので、私はいくつかのクラスを間違った方法で使用していると思います。

これが私のコードです： 

<ul class="thumbnails">
    <li class="span12">
        <div class="thumbnail span12">
            <img class="span3" data-src="holder.js/300x200" alt="300x200">
            <div class="caption span4">
                <h3>My Title</h3>
                <p>blabla</p>
            </div>
        </div>
    </li> 
</ul>

ここに画像の説明を入力してください

4

3 に答える 3

3

Slake、ブートストラップに関する私の小さな経験から、全体的なレイアウトをセットアップするために、含むdivを作成する必要があります。ブートストラップのドキュメント-レイアウトセクションはこちらをご覧ください。例えば、

<!-- wrap your twitter stuff in -->
<div class="container"></div>

また、この非常に役立つw3resourceチュートリアルを見て、twitterブートストラップでサムネイルを作成してください。このチュートリアルに続いて、セットアップしようとしているサムネイルグリッドの基本的な例をすばやく作成することができました。ここでコードをいじることができます。

サンプルコードの一部をコピーする（上記のリンクで詳しく説明します）：

<div class="container">
    <ul class="thumbnails">
        <li class="span12">
           <div class="thumbnail">
               <div class="span3 offset2"><img src="http://lorempixel.com/300/200/sports/5" alt="300x200"></div>
            <div class="span5">
                <h3>My Title</h3>
                <p>blabla</p>
            </div>
            </div>
        </li>
    </ul>
</div>
于 2013-03-25T08:25:53.100 に答える
0

親愛なる友人：
それはあなたを助けることができます:)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstap</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css">
<style>
body {padding:20px;}
img {margin:0 3px;}
</style>
</head>

<body>
<div class="container">
    <div class="row">
        <div class="snap4"><img class="pull-left" src="http://dummyimage.com/260x180/ddd/000" /></div>
        <div class="span8 pull-left">
            <h2>Heading</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
    </div>
    <br>
    <div class="row">
        <div class="snap4"><img class="pull-left" src="http://dummyimage.com/260x180/ddd/000" /></div>
        <div class="span8 pull-left">
            <h2>Heading</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
    </div>
    <br>
    <div class="row">
        <div class="snap4"><img class="pull-left" src="http://dummyimage.com/260x180/ddd/000" /></div>
        <div class="span8 pull-left">
            <h2>Heading</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
    </div>
</div>

</body>
</html>
于 2013-03-25T07:55:57.157 に答える
0

またoffset class、次のコードのように、コンテンツ用のスペースを確保するために使用できます。

<div class="container">
    <div class="row">
        <div class="snap4"><img class="pull-left" src="http://dummyimage.com/260x180/ddd/000" /></div>
        <div class="span7 pull-left">
            <h2>Heading</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        <div class="offset1"></div>
    </div>
    <br>
    <div class="row">
        <div class="snap4"><img class="pull-left" src="http://dummyimage.com/260x180/ddd/000" /></div>
        <div class="span7 pull-left">
            <h2>Heading</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        <div class="offset1"></div>
    </div>
    <br>
    <div class="row">
        <div class="snap4"><img class="pull-left" src="http://dummyimage.com/260x180/ddd/000" /></div>
        <div class="span7 pull-left">
            <h2>Heading</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        <div class="offset1"></div>
    </div>
</div>
于 2013-03-25T08:02:15.697 に答える