Twitter引导程序绝对定位

使用TWBootstrap和span3和span4列。我想将span3中的文本与span9中的图像底部对齐。我认为我已经达到了这个目标，但是觉得我已经扔进了厨房水槽去做。另外我不明白为什么TWB跨度大小不起作用？例如，如何让leftcol文本右对齐并放到此列的边缘？有人能解释一下吗 - 我似乎正在圈圈。这个例子是jsfiddle Twitter引导程序绝对定位

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

来源

2013-05-05 BBB3

您提供的小提琴不包括bootstrap.css ..您应该添加此项，或尝试http://bootply.com而不是 – ZimSystem 2013-05-05 09:22:19

谢谢 - 我不知道这存在。 – BBB3 2013-05-07 03:45:02

谢谢@Skelly我已经使用这个bootply（很棒！）http://bootply.com/60827重新编写了这段代码，但是我会很感激你对代码的评论。我想要做的就是强制左下角的文字与相邻的列对齐。其中的简单性让我无法回避。谢谢。 – BBB3 2013-05-07 04:43:16

我想知道，如果你使用的是合适的工具？您已将所有内容包裹在一个宽度为300px的主div中。除了一些其他问题之外，在这个宽度上，引导程序会折叠为单个堆积列。

来源

2013-05-05 11:33:35

我已经使用bootply.com重写了这段代码并让它工作，但我仍然认为代码可能更简单。 http://bootply.com/60827 – BBB3 2013-05-07 04:46:06

Twitter引导程序绝对定位

回答

相关问题