我已经开始研究 ZURB Foundation 5为了结合 Ruby on Rails 构建响应式网站。我有一个使用基础网格 block 的非常简单的布局。
不幸的是内容不关心容器的边界。最重要的是，在调整页面大小时，边栏容器出现奇怪的行为(移动到行中第一个 div 下面，然后消失)。
这是生成的 HTML 源代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>boldMessenger</title>
<link href="/assets/application.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/foundation_and_overrides.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/scaffolds.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/users.css?body=1" media="screen" rel="stylesheet" />
<script src="/assets/vendor/modernizr.js?body=1"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="CaM8b99kos0fU8YoAb4WhnV667Gmt77DE5/kOouIN4A=" name="csrf-token" />
</head>
<body>
<div class="row">
<div class="small-12 large-10 columns">
<h1>Listing users</h1>
<table>
<thead>
<tr>
<th>Email</th>
<th>Name</th>
<th>Password digest</th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>me@you.com</td>
<td>Test User</td>
<td>$2a$10$OGESd7xm.5sUIsZCATgSfukOxtwm4BkGawsIOhR.wptD8mYbrQq9.</td>
<td><a href="/users/4">Show</a></td>
<td><a href="/users/4/edit">Edit</a></td>
<td><a data-confirm="Are you sure?" data-method="delete" href="/users/4" rel="nofollow">Destroy</a></td>
</tr>
</tbody>
</table>
<br/>
<a class="button small radius" href="/users/new">New User</a>
</div>
<div class="hide-for-small-only large-2 columns">
<h2>Sidebar</h2>
<p>This sidebar is not visible on smaller screens, like the iPhone</p>
</div>
</div>
<script src="/assets/jquery.js?body=1"></script>
<script src="/assets/jquery_ujs.js?body=1"></script>
<script src="/assets/foundation/foundation.js?body=1"></script>
<script src="/assets/foundation/foundation.abide.js?body=1"></script>
<script src="/assets/foundation/foundation.accordion.js?body=1"></script>
<script src="/assets/foundation/foundation.alert.js?body=1"></script>
<script src="/assets/foundation/foundation.clearing.js?body=1"></script>
<script src="/assets/foundation/foundation.dropdown.js?body=1"></script>
<script src="/assets/foundation/foundation.interchange.js?body=1"></script>
<script src="/assets/foundation/foundation.joyride.js?body=1"></script>
<script src="/assets/foundation/foundation.magellan.js?body=1"></script>
<script src="/assets/foundation/foundation.offcanvas.js?body=1"></script>
<script src="/assets/foundation/foundation.orbit.js?body=1"></script>
<script src="/assets/foundation/foundation.reveal.js?body=1"></script>
<script src="/assets/foundation/foundation.tab.js?body=1"></script>
<script src="/assets/foundation/foundation.tooltip.js?body=1"></script>
<script src="/assets/foundation/foundation.topbar.js?body=1"></script>
<script src="/assets/foundation.js?body=1"></script>
<script src="/assets/turbolinks.js?body=1"></script>
<script src="/assets/users.js?body=1"></script>
<script src="/assets/application.js?body=1"></script>
</body>
</html>
最佳答案
密码字段出现问题。 那个长字符串使表格超出其范围。
关于ruby-on-rails - 为什么内容会超出其基础 5 div 容器，我该如何解决？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20361099/