【问题标题】:Bootstrap Pill Content Not CenteringBootstrap Pill 内容不居中
【发布时间】: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


【解决方案1】:

最终发生的事情是 &lt;div class="tab-content"&gt; 需要位于 rowcol-md-6 分隔符标签内,以便它仍然认识到必须进行居中。否则,关于居中药丸和标签内容的类似问题会出现在:Twitter Bootstrap: Center Pills

显然我可以使用更多的 CSS 培训,很抱歉花时间考虑这个问题。

【讨论】:

    猜你喜欢
    • 2019-12-22
    • 2013-05-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-07-20
    • 2014-01-29
    相关资源
    最近更新 更多