0

首先，我使用的是引导程序的响应式设计。
我希望这个气泡适合液体。但是如果它的宽度很窄，它就会突出。
我怎样才能解决这个问题？
它还必须适合任何宽度。
是否可以？

收缩时，气泡伸出！

演示 http://jsfiddle.net/SAKWb/

HTML

<div class="chat">

<table>
  <tbody>
     <tr>
               <th>Body</th>
     </tr>



    <tr id="comment_617">
            <td><div class="bubble me"><span class="text-error">01-10 03:29</span>：Person A<br>
            bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
            <form action="/shop/walmart/posts/617" class="button_to" data-remote="true" method="post"><div><input name="_method" value="delete" type="hidden"><input data-confirm="Are you sure?" data-disable-with="deleting..." value="destroy" type="submit"><input name="authenticity_token" value="aoLKQnl4M2SWVlOrXGR+qIMLSeY5m1tKiC/PSnYQjmw=" type="hidden"></div></form>
            </div></td>
    </tr>




    <tr id="comment_615">
            <td><div class="bubble me"><span class="text-error">01-10 03:25</span>：Person A<br>
            bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
            <form action="/shop/walmart/posts/615" class="button_to" data-remote="true" method="post"><div><input name="_method" value="delete" type="hidden"><input data-confirm="Are you sure?" data-disable-with="deleting..." value="destroy" type="submit"><input name="authenticity_token" value="aoLKQnl4M2SWVlOrXGR+qIMLSeY5m1tKiC/PSnYQjmw=" type="hidden"></div></form>
            </div></td>
    </tr>
</tbody>

 <div>

CSS

.chat {
    width: 100%;
    min-width: 300px;
}

.bubble{
    background-color: #FFFFFF;
    border-radius: 5px;
    box-shadow: 0 0 6px #B2B2B2;
    display: inline-block;
    padding: 10px 18px;
    position: relative;
    vertical-align: top;
    word-break: break-all;
}

.bubble::before {
    background-color: #FFFFFF;
    content: "\00a0";
    display: block;
    height: 16px;
    position: absolute;
    top: 11px;
    transform:             rotate( 29deg ) skew( -35deg );
        -moz-transform:    rotate( 29deg ) skew( -35deg );
        -ms-transform:     rotate( 29deg ) skew( -35deg );
        -o-transform:      rotate( 29deg ) skew( -35deg );
        -webkit-transform: rotate( 29deg ) skew( -35deg );
    width:  20px;
}

.me {
    float: left;   
    margin: 5px 45px 5px 5px;
    min-width: 250px; 
    width: 100%;      
}

.me::before {
    box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
    left: -9px;           
}

.you {
    float: left;    
    margin: 5px 10px 5px 5px;
    min-width: 250px;
    width: 100%;          
}

.you::before {
    box-shadow: 2px -2px 2px 0 rgba( 178, 178, 178, .4 );
    right: -9px;    
}
4

2 回答 2

2

气泡的灰色背景有一类 .hero-unit- 填充将气泡推出灰色背景

.hero-unit {
padding: 15px;  /*This was 60px*/
...
}

然后气泡的宽度需要从 100% 减少，因为有 15px 填充，所以改变这个

.me {
float: left;
margin: 5px 45px 5px 5px;
min-width: 250px;
width: 85%;  /*this line was 100%*/
}

如果要保持 60px 的 padding 是可以的，但是宽度.me必须更小，相应调整

于 2013-01-10T20:40:43.880 回答
1

假设您不想摆脱将气泡推向右侧的填充，则使.bubbleand.chat元素具有较小的百分比宽度以防止它们伸出。

但是，我假设您不希望该.chat区域始终处于 30%，那么为什么不使用媒体查询呢？

例子：

@media (min-width: 500px) {.chat{width:50%} .bubble{width:40%}
@media (min-width: 300px) {.chat{width:30%} .bubble{width:30%}

显然这些不是您应该使用的实际数字，但是如果您使用这些数字，您应该能够使其在任何窗口大小下看起来都不错，而不会丢失您已经拥有的结构。

于 2013-01-10T20:49:01.790 回答