0

誰でもこの問題を解決できますか?私はブートストラップを使用して Web サイトを開発していますが、これまでのところ 2 つの行があります。

   <section role="main">
       <div class="container">
        <div class="row no-space"><!-- Row 1 -->
            <div class="span3">             
                <h2>{ logo here }</h2>
                <h3>[ logo here ]</h3>
            </div>

            <div class="span6">
                <h2>Text here, text here <em>text here</em>...</h2>
                <h2>text here!</h2>
            </div>

            <div class="span3">
                <img src="img/coffee.png" alt="Coffee and code">
            </div>

        </div><!-- /Row 1 -->

        <div class="row no-space"><!-- Row 2 -->
            <div class="span3">
                <img src="img/code01.png" alt="Coda2 code">
            </div>                  
            <div class="span3">
                <img src="img/code01.png" alt="Coda2 code">
            </div>
        </div><!-- /Row 2-->
    </div><!-- Container -->
 </section><!-- MAIN -->

Web サイト全体は、span3 と 6 を使用して構築され、高さは span3 で 220、span6 で 460 です。span6 は span3 に対して 2 倍の高さを持つため、1 行目の span3 と 2 行目の最初の span3 の間には 240px のギャップが生じます。

このギャップをどのように取り除くことができるか、ネストを試みましたが、ウェブサイトがリロードされるたびに div(span3) がシャッフルされるため、実際には必要なものではありません。

お時間をいただき、ありがとうございました。

4

1 に答える 1

0

あなたがやりたいことは、スパンを列と考えて、列の中にデータを追加することだと思います

   <section role="main">
   <div class="container">
    <div class="row no-space"><!-- Row 1 -->
        <div class="span3">             
            <h2>{ logo here }</h2>
            <h3>[ logo here ]</h3>
            <img src="img/code01.png" alt="Coda2 code">
        </div>

        <div class="span6" data-rowspan="2" data-colspan="2">
            <h2>Text here, text here <em>text here</em>...</h2>
            <h2>text here!</h2>
        </div>

        <div class="span3">
            <img src="img/coffee.png" alt="Coffee and code">
            <img src="img/code01.png" alt="Coda2 code">
        </div>

    </div><!-- /Row 1 -->
</div><!-- Container -->

于 2013-06-19T20:33:22.230 に答える