Question

我在Ruby on Rails上使用Bootstrap。我创建了一个行类，然后是一个带有col-md-2的侧边栏，它始终位于页面左侧从标题到页面底部。除了在同一行类中，还有一个带有col-md-10的主体。在用户索引页面的主体中，我创建了另一行，并动态地为每个配置文件使用cold-md-4。当浏览器足够宽时，一切看起来都很好，就像你在第一张照片中看到的那样，但是当我把它变得更紧一些时，事情就变得搞砸了。

我想只有嵌套的列响应，所以侧边栏永远不会比第一张图片更宽或更紧。我怎么能这样做？如果需要，我可以附加CSS。

[

Answer 1

如果您不希望边栏重新调整大小，请不要使用侧边栏的引导行和列类。您可以使用css设置宽度并通过执行以下操作来拉伸它以获取高度：

position: absolute;
width: 200px;
top: 0px;
bottom: 0px;
left: 0px;

Answer 2

我的代码：

<div id="home_loggedin">
  <div class="container">
    <div class="row">
      <div class="col-md-2 col-aside">
        <%= link_to "Show user", user_path(current_user) %>
        <%= link_to "Index user", users_path %>
        <%= link_to "Edit user", edit_user_profile_path(current_user) %>
      </div>
      <div class= "col-md-10 col-middle">
       <%= yield %>
      </div>
    </div>
  </div>
</div>

产生的代码：

<div class="container">
  <div class="row">
    <h1 style="text-align:center">Users</h1>
    <ol class="user-profile-index">
      <% @users.each do |user| %>
        <div class="col-md-4">
          <li>
            <% if user.profile %>
              <% if user.profile.avatar %>
                <%= link_to user do %>
                  <%= image_tag user.profile.avatar.url(:thumb), class: 'avatar' %>
                <% end %>
              <% end %>
              <span class="user"><%= link_to user do %>
               <%= user.profile.first_name %> <%= user.profile.last_name %>
               <% end %></span>
              <span class="company"><%= user.profile.company %></span>
              <span class="job_title"><%= user.profile.job_title%></span> 
            <% end %>
          </li>
        </div>
      <% end %>
    </ol>
  </div>
</div>

和css：

html, body {
  height: 100%;
}

#home_loggedin {
  min-height: 100%;
  height: 100%;
  .container {
    height: 100%;
    min-height: 100%;
    width: 100%;
    .row {
      height: 100%;
      min-height: 100%;
    }
  }
}

.col-aside {
  background: $garmin-blue;
  min-height: 100%;
  height: 100%;
  max-width: 250px;
}

.col-middle {
  background: #fff;
  min-height: 100%;
  height: 100%;
}

因此，当我尝试将屏幕缩小时，主体会跳到侧边栏下方，而行类会占据屏幕的右侧。

只使用bootstrap和rails响应嵌套列表

2 个答案: