html - 使用 bootstrap 时如何修复与 CSS 的对齐？

Question

我正在使用 Bootstrap

不知何故，它看起来一团糟。似乎 twitter-bootstrap 正在阻止。
我怎样才能解决这个问题？请检查我的演示。

演示 http://jsfiddle.net/5r6UM/4/

HTML

<span id="chat">






    <span id="comment_652">
        <div class="bubble_row">
            <div class="me_icon">
                <p class="responsive-img">  
        <a href="/user/2"><img alt="Dsc_0023" class="img-polaroid" src="http://t1.gstatic.com/images?q=tbn:ANd9GcTHwJFqUSlCJvXdCKEQ9dPxPhx_FYOcbQqD_Hco7vTSwEK_eVpnD-qTWcBCmg" style="width: 50px; height: 50px" /></a>
</p>
            </div>
            <div class="bubble me">

            <span class='text-error'>02:15:02</span>：<a href="/user/2">Person B</a><br />
            What
            </div>
        </div>
    </span>




    <span id="comment_651">
        <div class="bubble_row">
            <div class="me_icon">
                <p class="responsive-img">  
        <a href="/user/2"><img alt="Dsc_0023" class="img-polaroid" src="http://t1.gstatic.com/images?q=tbn:ANd9GcTHwJFqUSlCJvXdCKEQ9dPxPhx_FYOcbQqD_Hco7vTSwEK_eVpnD-qTWcBCmg" style="width: 50px; height: 50px" /></a>
</p>
            </div>
            <div class="bubble me">

            <span class='text-error'>02:14:51</span>：<a href="/user/2">Person B</a><br />
            Hi there
            </div>
        </div>
    </span>




    <span id="comment_650">
        <div class="bubble_row">
            <div class="bubble you"><span class='text-error'>02:12:53</span>：<a href="/user/1">Person A</a><br />
            Hi

            </div>
            <div class="you_icon">
                <p class="responsive-img">  
        <a href="/user/1"><img alt="X50" class="img-polaroid" src="http://www.miraiha.net/wpblog/wp-content/uploads/2010/10/designreviver-free-twitter-social-icon.jpg" style="width: 50px; height: 50px" /></a>
</p>
            </div>
        </div>
    </span>




    <span id="comment_649">
        <div class="bubble_row">
            <div class="me_icon">
                <p class="responsive-img">  
        <a href="/user/2"><img alt="Dsc_0023" class="img-polaroid" src="http://t1.gstatic.com/images?q=tbn:ANd9GcTHwJFqUSlCJvXdCKEQ9dPxPhx_FYOcbQqD_Hco7vTSwEK_eVpnD-qTWcBCmg" style="width: 50px; height: 50px" /></a>
</p>
            </div>
            <div class="bubble me">

            <span class='text-error'>02:11:46</span>：<a href="/user/2">Person B</a><br />
            Wow
            </div>
        </div>
    </span>




    <span id="comment_645">
        <div class="bubble_row">
            <div class="bubble you">18:03:02：<a href="/user/1">Person A</a><br />
            Hello

            </div>
            <div class="you_icon">
                <p class="responsive-img">  
        <a href="/user/1"><img alt="X50" class="img-polaroid" src="http://www.miraiha.net/wpblog/wp-content/uploads/2010/10/designreviver-free-twitter-social-icon.jpg" style="width: 50px; height: 50px" /></a>
</p>
            </div>
        </div>
    </span>




    <span id="comment_644">
        <div class="bubble_row">
            <div class="bubble you">17:54:43：<a href="/user/1">Person A</a><br />
            Howdy

            </div>
            <div class="you_icon">
                <p class="responsive-img">  
        <a href="/user/1"><img alt="X50" class="img-polaroid" src="http://www.miraiha.net/wpblog/wp-content/uploads/2010/10/designreviver-free-twitter-social-icon.jpg" style="width: 50px; height: 50px" /></a>
</p>
            </div>
        </div>
    </span>




    <span id="comment_643">
        <div class="bubble_row">
            <div class="bubble you">17:54:00：<a href="/user/1">Person A</a><br />
            Yahoo

            </div>
            <div class="you_icon">
                <p class="responsive-img">  
        <a href="/user/1"><img alt="X50" class="img-polaroid" src="http://www.miraiha.net/wpblog/wp-content/uploads/2010/10/designreviver-free-twitter-social-icon.jpg" style="width: 50px; height: 50px" /></a>
</p>
            </div>
        </div>
    </span>




    <span id="comment_642">
        <div class="bubble_row">
            <div class="bubble you">21:15:25：<a href="/user/1">Person A</a><br />
            OK

            </div>
            <div class="you_icon">
                <p class="responsive-img">  
        <a href="/user/1"><img alt="X50" class="img-polaroid" src="http://www.miraiha.net/wpblog/wp-content/uploads/2010/10/designreviver-free-twitter-social-icon.jpg" style="width: 50px; height: 50px" /></a>
</p>
            </div>
        </div>
    </span>




    <span id="comment_641">
        <div class="bubble_row">
            <div class="bubble you">20:47:34：<a href="/user/1">Person A</a><br />
            Hi

            </div>
            <div class="you_icon">
                <p class="responsive-img">  
        <a href="/user/1"><img alt="X50" class="img-polaroid" src="http://www.miraiha.net/wpblog/wp-content/uploads/2010/10/designreviver-free-twitter-social-icon.jpg" style="width: 50px; height: 50px" /></a>
</p>
            </div>
        </div>
    </span>











</span>

Answer 1

您正试图将一个元素 float 到全 Angular 元素 (.bubble) 旁边。这是一种应该起作用的方法: http://jsfiddle.net/5r6UM/9/

主要区别:

.bubble_row {
  position: relative;
}

.me_icon {
    position: absolute;
    left: 0;
    top: 0;
    margin: 5px 10px 5px 5px;
    text-align: left;    
}

.you_icon {
    position: absolute;
    right: 0;
    top: 0;
    margin: 5px 10px 5px 5px;
    text-align: right;          
}