Question

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

不幸的是，内容并不关心容器的边界。最重要的是，当调整页面大小时，侧边栏容器会出现奇怪的行为（移动到行中的第一个div，然后消失）。

screenshot in Safari

这是生成的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>

Answer 1

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

为什么内容突破了它的基础5 div-container，我该如何解决？

1 个答案: