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引導程序絕對定位

回答

相關問題