目前我正在使用RubyOnRails和bootstrap作为框架进行推特克隆。当尝试使用“col-sm”div类在后面板中分发一些文本时,文本似乎在左边卡在一起, as seen here.
这是我的代码:
<div class="row">
<div class="col-xs-3">
<div class="panel panel-default">
<div class="panel-body">
<p>status</p>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<p>trend</p>
</div>
</div>
</div>
<div class="col-xs-6">
<%= render '/components/post_form' %><br></br>
<% for @p in @posts %>
<div class="panel panel-default post-panel">
<div class="panel-body">
<div class="col-sm-1">
AVATAR
</div>
<div class="col-sm-11">
<p><%= @p.content %></p>
</div>
<div class="col-sm-12">
LINKS
</div>
</div>
</div>
<% end %>
</div>
<div class="col-xs-3">
<div class="panel panel-default">
<div class="panel-body">
<p>about</p>
</div>
</div>
</div>
</div>
我使用的是最新的bootstrap sass版本3.3.6,它包含在gemfile中。代码有什么问题,或者最新版本的bootstrap是否意味着我需要做一些不同的事情?
答案 0 :(得分:0)
看看这一节:
<div class="col-sm-1">
AVATAR
</div>
<div class="col-sm-11">
<p><%= @p.content %></p>
</div>
<div class="col-sm-12">
LINKS
</div>
第一个问题是文本“AVATAR”比1个bootstrap列宽,因此它会扩展到容器之外。使用col-sm-2
/ col-sm-10
可以解决问题。
其次,列大小每行最多可添加12列。您在同一行中有col-sm-1
,col-sm-11
和col-sm-12
。