Css 使用引导和rails仅使嵌套列mds响应

我正在使用RubyonRails的引导。我制作了一个row类，然后是一个带有col-md-2的侧边栏，它总是出现在页面的左侧，从页眉到页面底部。除此之外，在同一行类中还有一个主体具有col-md-10。在用户索引页面的正文中，我做了另一行，并对每个概要文件动态使用cold-md-4。当浏览器足够宽时，就像你在第一张图中看到的那样，一切看起来都很好，但当我把它弄得更紧时，事情就搞砸了

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

---

[

如果您不想重新调整侧栏的大小，请不要在侧栏中使用引导行和列类。您可以简单地使用css设置宽度，然后通过执行以下操作将其拉伸以占据高度：

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

我现在的代码是：

<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>

---

因此，当我试图缩小屏幕时，主体跳转到侧边栏下，row类占据屏幕的右侧。

请显示您的代码，它使用float:left，width:20%，min width:200px，我使用height:100%。这个位置：绝对，顶部：0px，底部：0px，left:0px组合如何工作与我的解决方案相比？根据您的说法，哪一个更好？我不认为哪一个更好，它们只是对不同情况的响应不同。例如，当视图端口宽度超过1000px时，您的视图端口会变大，并且会受到其他元素流的影响，而我的视图端口会保持不变-这取决于您想要什么.结果我还是没能把它拉下来，因为重叠。因为我用引导功能使主体屏幕变小了（我希望主体有引导功能，因为我想让它与侧边栏不同，具有响应性）在侧栏的顶部，我找不到一个好的解决方案。另一方面，如果我使用嵌套引导并定义外部列（侧栏）宽度通过覆盖引导代码，然后主体将跳转到侧边栏下，因为我使屏幕变窄。我也尝试了你的方法，但也没有成功。如果你愿意，我可以共享我当前的代码。首先，有两件重要的事情很突出-你不能在容器中嵌套引导容器（）您正在为每个用户创建一个div，其类为

col-md-4

。这仅在您有3个用户时有效，因为引导网格系统要求将列添加到12个。我建议查看引导文档，并查找几个带有侧菜单的引导示例，以了解如何将所有这些列组合在一起r、 看看这个例子：Thx Paul，这个网站看起来很有希望。那么我的最后一个问题。对于这个项目，我应该使用什么解决方案？（我想保持简单）你给我展示了不同的解决方案，但你会坚持哪一个？主体必须是有响应的，这是毫无疑问的。当涉及到侧边栏时，我觉得不应该是，但你刚才链接的这个解决方案很好。所以选项是：1.侧边栏没有引导，但主体有引导。2.侧边栏有引导（覆盖“否”表示响应）和主体，以及主体内容的额外嵌套引导。3.您刚刚链接的切换侧栏解决方案。我将使用选项1。使用引导列的原因是它们是响应的，因此如果您不希望侧栏响应，请不要使用col xx类。您仍然可以在当然，侧边栏不是列类。

<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>

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%;
}