【发布时间】:2016-03-21 09:12:03
【问题描述】:
与药丸内容相比,侧边栏存在问题。这段代码的结果基本上是<aside> 被推到了药片选项卡旁边的左上角,而药片的内容全部散布在它下面并锚定在左侧。我尝试了很多 CSS 技巧(边距、宽度等),但似乎没有任何东西可以将其捕捉到内容的中心(即微博)。
相关CSS:
.nav-pills > .active > a,
.nav-pills > .active > a:hover,.nav-pills > li > a:hover {
float:none;
display:inline-block;
*display:inline;
zoom:1;
text-decoration: none;
font-weight: bold;
border-radius:0px;
border-bottom-width: 4px;
border-bottom-style: solid;
border-bottom-color: #000000;
color: #000 !important;
background-color: transparent !important;
}
.nav-pills {
border-radius:0px;
text-align: center;
}
相关ERB:
<% provide(:title, @user.name) %>
<div class="row">
<aside class="col-md-4">
<section class="user_info">
<h1>
<%= gravatar_for @user %>
<%= @user.name %>
</h1>
<% if @user.admin? %>
<span class="label label-warning">Administrator</span>
<% end %>
<br>
<br>
<br>
<br>
<div style="color:grey">
<% if current_user.admin? %>
<%= @user.email %>
<% end %>
<br>
<%= @user.activated_at.strftime("Joined: %m/%d/%Y") %>
</div>
</section>
</aside>
<div class="col-md-8">
<ul class="nav nav-pills">
<li class="active">
<a data-toggle="pill" href="#microposts">Posts (<%= @user.microposts.count %>)</a>
</li>
<li>
<a data-toggle="pill" href="#events">Events (Insert count here)</a>
</li>
</ul>
</div>
</div>
<div class="tab-content">
<div id="microposts" class="tab-pane fade in active">
<% if @user.microposts.any? %>
<ol class="microposts">
<%= render @microposts %>
</ol>
<%= will_paginate @microposts %>
<% else %>
No posts yet. Create one on the sidebar.
<% end %>
</div>
<div id="events" class="tab-pane fade">
<p>Events brah</p>
</div>
</div>
【问题讨论】:
-
你忘了
vertical-align: middle -
具体在哪里?这似乎对任何一个 CSS 类都没有帮助。
标签: html css ruby-on-rails twitter-bootstrap