带有 div 的 Twitter 引导结构答案

【问题标题】：Twitter bootstrap structure with divs带有 div 的 Twitter 引导结构
【发布时间】：2012-11-30 02:57:47
【问题描述】：

我想知道是否可以将该条移到下方，该条用<p> 标签包裹。

<div class="span9 well">
<div class="row-fluid">
    <div class="row-fluid">
        <div class="span2">
            <img src="dummy_image.jpg" class="img-polaroid">
        </div>
        <div class="span7">
            <h2>Title</h2>      
            <p>Texttttttttttttttttt.</p>
            <p >
                <a href="#"><span class="label label-info">Genre</span></a>
                <span class="label label-warning">
                <i class="icon-star"></i>
                ...<!-- stars -->
                </span>     
                <a href="#"><span class="label label-success">Yes</span></a> / <a href="#"><span class="label label-important">No</span></a>
            </p>
        </div>
    </div>
</div>

我要更改的实际块的屏幕截图：

【问题讨论】：

CSS 是你的朋友。您需要进行一些自定义，但这没什么大不了的。
@Wojciech Dłubacz 给出的答案很有效，而 CSS 是 Twitter-Bootstrap 的原创。

标签： css html twitter-bootstrap vertical-alignment

【解决方案1】：

使用position:absolute

.row-fluid{position:relative; width:450px; background:red; overflow:auto}
.span2{display:inline; float:left}
.span7{display:inline; }
.row-fluid > p{position:absolute; bottom:0; left:170px}

DEMO

【讨论】：

也感谢这个。使用它:) 和另一个（在固定布局上）

【解决方案2】：

你总是可以这样命名你的<p>标签：

<p class="bar">
    <a href="#"><span class="label label-info">Genre</span></a>
    <span class="label label-warning">
    <i class="icon-star"></i>
    ...<!-- stars -->
    </span>     
    <a href="#"><span class="label label-success">Yes</span></a> / <a href="#"><span class="label label-important">No</span></a>
</p>

然后在你的css代码中使用.bar {margin-top: 20px;}，这不是坏行为

【讨论】：

谢谢 :) 我将此添加到我的自定义 css 文件中，就像一个魅力