html - Twitter bootstrap 绝对定位

Question

将 TWBootstrap 与 span3 和 span4 列一起使用。我想将 span3 中的文本与 span9 中图像的底部对齐。我想我已经实现了这一点，但我觉得我已经把它扔进了厨房的水槽里。另外我不明白为什么 TWB 跨度大小不起作用？例如，如何使 leftcol 文本右对齐并位于该列的边缘？有人可以解释一下 - 我似乎在兜圈子。该示例在jsfiddle上

<div class="container">
  <div id="main">
    <div class="row">
      <div id="leftcol">
        <span class="span4">
          <h1>Right</h1>
          <h4>Enter</h4>
        </span>
      </div>
      <span id="mainpic" class="span8 box">
          <p align="middle">green box </p>                <p align="middle">representing image</p>
      </span>
     </div>
  </div>
</div>

css

body { height: 100%; width: 100%; position: absolute; }
h1 h4 {  text-align:right; }
#main { position:relative; background:red; height:400px; width:300px; }
#leftcol { position:absolute; background:blue; bottom:5px;}
#mainpic { position:absolute; background:green; top:10px; left:25%; }
.box { height: 370px; width: 300px; border: solid 10px #ccc; } 

Answer 1

我想知道您是否使用了正确的工具来完成这项工作？您已将所有内容包装在一个宽度为 300 像素的主 div 中。除了一些其他问题之外，在这个宽度上，bootstrap 会折叠成单个堆叠列。