为什么内容会脱离其基础 5 div-container，我该如何解决？答案

【问题标题】：Why does the content break out of its foundation 5 div-container and how do I fix it?为什么内容会脱离其基础 5 div-container，我该如何解决？
【发布时间】：2013-12-03 20:33:00
【问题描述】：

我已经开始研究ZURB Foundation 5，以便结合 Ruby on Rails 构建响应式网站。我有一个使用基础网格块的非常简单的布局。

不幸的是，内容并不关心容器的边界。最重要的是，在调整页面大小时，我会出现侧边栏容器的奇怪行为（移动到该行中的第一个 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>

【问题讨论】：

另外，users.css 是空的，移除scaffolds.css 时布局仍然损坏
这是导致问题的表。密码摘要不会换行，从而使表格爆炸。 screenshot: first column as panel

标签： ruby-on-rails html css zurb-foundation

【解决方案1】：

问题出在密码字段上。那个长字符串使表格超出了它的范围。

【讨论】：

没错，这就是我两天前在 cmets 上写的。知道如何轻松包装它吗？
糟糕！对此感到抱歉。我不认为这是可能的......而且使用真正的电子邮件会变得更糟。您可以调整文本大小并使用图标而不是文本进行“编辑”等。它只是不适合。