Question

我在页面右侧创建了一个包含井的跨度。在那个井里，我试图使用多个div class =“span__”命令对齐多行图像和文本。一切都得到妥善放置，但是井内第一道井被推到井外。

<!-- The “well” below is on the right side of the page (other content span=3 is on the left of it) -->

标题

支持文字

    <!-- Above content is all correctly contained in the well, but I want the content below in the well too, but also want to distribute several lines horizontally. Using the “span=” below, within the “span8 offset0” opened above does distribute the content properly from a horizontal standpoint, but it gets removed from the well. Is there a way, such as a “sub-span” to place content horizontally while still INSIDE the well? Please note, as you can see from the various span= entries below, I’m not looking to just center them.  -->


    <div class="span3 offset2">
    <img src="assets/img/vote211x58.png" alt="vote" width="211" height="58" hspace="7">
    </div>

按钮离开

   <div class="span2 offset0">
     <p></p><a class="btn btn-mini" href="#">Button middle</a>
     </div>

    <div class="span2 offset0">
      <p><a class="btn btn-xlarge" href="#">Button right</a></p>
    </div>
    <!--end line of buttons -->


   <!-- start new line, want all contained in the well, but distributed horizontally -->
    <div class="span2 offset1">
       <p><img src="assets/img/why-green.png" alt="why green" width="32" height="45" hspace="18"></p>
    </div>


    <div class="span1">
    <!--  <a class="btn small" href="#">view stats</a> -->
       <p></p>
    </div>

    <div class="span2 offset1">
      <p><img src="assets/img/why-red.png" alt="why red" width="32" height="45" hspace="16"></p>
    </div>
    <!-- end last line of content I want included in the well -->

    </div>  <!-- closes the well -->
    </div>  <!-- closes the span=8 containing the well  -->


    </div>  <!-- closes the row containing the left span=3 content + the span=8 content holding the well.  THANK YOU FOR YOUR HELP! -->

Answer 1

不是一个很好的解决方案，但可能在某些情况下有效：

在CSS中创建一个新井（例如“.well-new”）（因此它不会搞砸整个站点中“井”的其他用途）并给它更大的底部填充（填充：19px 19px <强> 180px 19px;）和相应大的负边距底部（我使用-168px;） - 效果是井的底部延伸得更低，将下面的内容合并到其中。

我不确定这会如何影响移动设备上的效果图。

欢迎更好的答案！

Twitter-bootstrap - 如果井已经在自己的范围内，如何在井内使用“span”分发内容？

标题

1 个答案: