引导程序和 CSS 。抵消评论麻烦答案

【问题标题】：Bootstrap and CSS . offsetting comments trouble引导程序和 CSS 。抵消评论麻烦
【发布时间】：2015-07-07 07:27:48
【问题描述】：

我遇到了问题。我有一个 cmets 盒子，里面有 cmets。目前 cmets 宽度设置为评论正文的长度，最大值为 50%。

当页面的用户创建评论时，想法是让评论从框的右侧开始。为此，我最初使用引导程序抵消了@user 的评论。问题是，如果@user 发表简短评论，评论会居中。我希望它与@user 长评论的风格相匹配。

<div class = "bubble_user col-md-offset-3 col-md-7" style = "width:    <%= comment.body.length %>%">
<%= comment.body %>
</div>

CSS

.bubble_user {
position: relative;
height: auto;
max-width: 50%;
margin: 14px;
  padding-top: 15px;
background: #6699FF;
border-radius: 7px;
-webkit-box-shadow: 0px 3px 13px 0px rgba(97, 97, 97, 0.89);
color: white;
}

【问题讨论】：

我想说，最简单的方法可能是在列内使用一个额外的容器元素，并将其与列的右侧对齐......（覆盖实际的 width恕我直言，引导列元素不是一个好主意，可能会导致麻烦。）
这太糟糕了：style = "width: <%= comment.body.length %>%"，这不是一个好主意，而且您没有指定单位（px、em、%、pt、pc 等）。要定位元素，只需将 float:right 添加到用户 cmets。
为什么将宽度设置为评论正文长度不是一个好主意？我应该如何根据评论正文长度调整评论的宽度？

标签： html css ruby-on-rails twitter-bootstrap

【解决方案1】：

尝试向 CSS 左侧或右侧添加“浮动”...

 .bubble_user {float: right;}

【讨论】：

我无法添加 float: right 样式，因为使用引导程序将列设置为 float: left;