Css 引导div不在正确的位置
有人能给我解释一下为什么会这样吗?我的移动视图工作正常,但当我展开窗口时,它会断开到附加的图片。两张卡的代码完全相同,如下所示:Css 引导div不在正确的位置,css,ruby-on-rails,twitter-bootstrap,Css,Ruby On Rails,Twitter Bootstrap,有人能给我解释一下为什么会这样吗?我的移动视图工作正常,但当我展开窗口时,它会断开到附加的图片。两张卡的代码完全相同,如下所示: <!-- 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 Know
<!-- 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' %>
非常混乱,因为代码相同请尝试将带有class
col-xs-12
的div放在单独的行中,即在带有class行的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">
...
...
当我尝试对您的部分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>
我认为在更正后,您的代码应该能按预期工作。您能做些修改吗?-这里有一个fiddle,但是问题不是由fiddle复制菜单的代码是什么,因为fiddle根本没有它all@O.Don您也可以尝试使用
float right
classI。我已将问题更新为包含菜单代码。float right将其移到上面,但它没有对齐,并且宽度也与第一个div不同。我很难理解为什么这些div使用相同的代码会显示不同?感谢您指出这一点。不幸的是,纠正div并没有解决问题