引导 div 不在正确的位置答案

【问题标题】：Bootstrap div is not in right place引导 div 不在正确的位置
【发布时间】：2018-06-04 00:11:12
【问题描述】：

有人能解释一下为什么会这样吗？我的移动视图工作正常，但是当我展开窗口时它会中断到附加的图片。两张卡的代码实际上是相同的，如下所示：

<!-- This is the view for the page: -->
<div class="col-12 col-md-9">
  <div class="col-12 d-flex align-items-center mb-3">
    <span class="h2"> Spread the Knowledge </span>
    <%= link_to fa_icon("edit"), new_discussion_path, class: "profile-link fa-2x"  %>
  </div>
  <div class="col-xs-12 col-md-9 mb-4">
    <div class="card">
      <div class="card-header">
        <h4>Answered Questions</h4>
      </div>
      <div class="list-group list-group-flush">
        <%= render "answered_disc" %>
      </div>
      <div class="card-footer text-center d-none">
        See all
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-md-9 mb-4">
    <div class="card">
      <div class="card-header">
        <h4>Unanswered Questions</h4>
      </div>
      <div class="list-group list-group-flush">
        <%= render "unanswered_disc" %>
      </div>
      <div class="card-footer text-center d-none">
        See all
      </div>
    </div>
  </div>
</div>

两个部分都显示以下代码：

<% @discussions.each do |discussion| %>
    <% if discussion.parent_id.nil? && discussion.resolved == true %>
        <div class="list-group-item">
          <div class="row">

             <div class="wadinfo col-xs-12 col-md-9 mb-4">
                 <%= link_to discussion_path(discussion), class: 'profile-link' do %>
                        <h6 class="small"><%= discussion.content  %></h6>
                    </div>
                <% end %>
             </div>

             <div class="actions">
                        <% if discussion.resolved == false %>
                        <%= link_to 'Answer', discussion_path(discussion), class: 'profile-link' %>
                        <% else %>
                        <%= link_to 'Contribute', discussion_path(discussion), class: 'profile-link' %>
                        <% end %>
             </div>

          </div>
        </div>
    <% end %>
<% end %>

<!-- Code for menu -->
<div class="row row-sidebar">
  <div class="col-12 mb-3 text-center">
  </div>

  <div class="col-12">
    <ul class="list-group">
      <% sidebar_elements.each do |element| %>
        <a class="list-group-item list-group-item-action" href="<%= element[:link] %>">
          <%= element[:name] %>
        </a>
      <% end %>
    </ul>
  </div>
</div>

边栏在清单文件中呈现为部分：

<% content_for :sub_layout do %>
  <div class="row mt-4">
    <div class="d-none d-md-flex col-3 align-items-start">
        <%= render "wads/sidebar" %>
    </div>

    <%= yield %>
  </div>
<% end %>

<%= render template: 'layouts/application' %>

由于代码相同，很困惑

【问题讨论】：

你能做个小提琴吗？
jsfiddle.net/hjm33q84/2 - 这是一个小提琴，但问题并没有被小提琴复制
菜单的代码是什么，因为fiddle根本没有
@O.Don 你也可以尝试使用float-right class
我已更新问题以包含菜单代码。 float-right 将其移动，但未对齐，宽度也与第一个 div 不同。我很难理解为什么这些 div 使用相同的代码会显示不同？

标签： css ruby-on-rails twitter-bootstrap

【解决方案1】：

当我尝试格式化您的部分 erb 代码时，它似乎坏了。我想这可能是原因，因为浏览器会尝试纠正损坏的 HTML，因此结构可能会出错

<!-- This block seems broken -->
  <div class="wadinfo col-xs-12 col-md-9 mb-4">
      <%= link_to discussion_path(discussion), class: 'profile-link' do %>
             <h6 class="small"><%= discussion.content  %></h6>
         </div>
 <% end %><!-- The link_to block has an incorrect closing </div> -->
</div>

我认为在更正之后，您的代码应该可以按预期工作。

【讨论】：

感谢您指出这一点。不幸的是，更正 div 并没有解决问题

【解决方案2】：

尝试将类 col-xs-12 的 div 放在单独的行中，即放在类 row 的 div 中：

您的代码：

<div class="col-xs-12 col-md-9 mb-4">
    <div class="card">
        ...

固定代码：

<div class="row">
    <div class="col-xs-12 col-md-9 mb-4">
        <div class="card">
            ...

【讨论】：