2

我在包含井的页面右侧创建了一个跨度。在那口井中，我尝试使用多个 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! -->
4

1 回答 1

1

不是一个很好的解决方案，但在某些情况下可能会起作用：

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

我不确定这会如何影响移动设备上的渲染。

欢迎更好的答案！

于 2012-06-18T14:42:42.063 回答