Question

任何人都可以帮我解决这个问题，我正在使用bootstrap开发我的网站，到目前为止我有两排。

   <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 -->

整个网站将使用span3和6构建，span3的高度为220，span6的高度为460。因为span6与跨度3具有双倍高度，所以在第一行的span3和第二行的第一个span3之间将是240px的间隙。

我如何消除这种差距，我尝试了嵌套，但实际上并不是我需要的东西，因为每次重新加载网站时，div（span3）都会被洗牌。

感谢您的时间和帮助。

Answer 1

我认为您想要做的是将跨度视为列并在列中添加数据

   <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 -->

Bootstrap rawspan和列跨度

1 个答案: