Question

使用带有span3和span4列的TWBootstrap。我想将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

我想知道你是否正在使用合适的工具？你已将所有内容包装在一个宽度为300px的主div中。除了一些其他问题，在此宽度引导程序折叠为单个堆叠列。

Twitter bootstrap绝对定位

1 个答案: