Question

我的Ruby on Rails应用程序使用BootStrap来简化布局渲染。我定义了行和列：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-3 left_border">
      <ul class="" role="menu">
        <li><%= link_to t('Groups'), groups_path %></li>
        <li><%= link_to t('Users'), users_path %></li>
        <li><%= link_to t('Parameters'), "#" %></li>
      </ul>
    </div>
    <div class="col-md-8 col-md-offset-1">

      <%= yield %>

      <% flash.each do |key, value| %>
        <div class="alert alert-<%= key %>"><%= value %></div>
      <% end %>

    </div>
  </div>
</div>

左边框类仅设置元素的背景颜色：

.left_border {
   background-color: $grayDarker;
}

它工作正常，但第一列的背景仅针对其内容设置，而不是针对整个单元格。如果＆lt;％= yield％＆gt;函数返回很多行，我在左边有一个小灰盒，包括菜单，我想在那里显示一个完整的灰色列。谢谢你的帮助。

Answer 1

我终于切换到了css3 Flexible Box功能，它提供了一种设计网格的智能方法：

1 - 我在我的css文件中创建了我需要的类

/* flex containers */
.flex-container {
  display: -webkit-flex;
  display: flex;
  background-color: white;
  }

.flex-container-v {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  background-color: white;
  }

.flex-item {
  background-color: white;
  margin-left: 10px;
  width: 80%
  }

.flex-item-border {
  background-color: lightgrey;
  width: 20%;
  }

2 - 我使用这些类来组织我的显示块

   <div class="flex-container-v">
     <div class="flex-container">
        <div class="flex-item-border logo">
                <br/>
                <%= image_tag("k.png", alt: "KeyMan") %>
                <br/>
        </div>
        <div class="flex-item">
                <nav class="top_menu">
                    <ul>
                        <% if user_signed_in? %>
                        <li> <%= t('User') %>: <%= link_to (current_user.first_name + ' ' + current_user.name), edit_user_registration_path %></li>
                        <li> | <%= link_to t('Sign_out'), destroy_user_session_path, method: "delete" %></li>
                        <% else %>
                        <li> <%= link_to t('Sign_in'), new_user_session_path %></li>
                        <% end %>
                        <li> | <%= link_to t('Help'), "#" %> </li>
                    </ul>
                </nav>
                <h1><%= t('Cryptographic Keys Manager') %></h1>             </div>
        </div>
...

它工作正常！

如何设置DIV全高的背景颜色？

1 个答案: