Question

我可能正在做一些非常愚蠢但却无法弄清楚是什么的东西。我想要一些非常简单的东西将页面分为两个相同的部分。

代码如下所示：

<body>
    <div class="row">
        <div class="col-lg-6">
            LEFT ONE
        </div>
        <div class="col-lg-6">
            RIGHT ONE
        </div>
    </div>
</body>

问题：

尽管它将页面分为两部分，但它也会在X行上产生一些溢出。我试图找到原因，并注意到如果我同时计算<div class="col-lg-6">它的宽度略大于父<div class="row">。

段：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
    <div class="row">
        <div class="col-lg-6">
            LEFT ONE
        </div>
        <div class="col-lg-6">
            RIGHT ONE
        </div>
    </div>
</body>
</html>

你知道我做错了什么吗？感谢。

Answer 1

您忘记了container或container-fluid课程。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-6">
            LEFT ONE
        </div>
        <div class="col-lg-6">
            RIGHT ONE
        </div>
    </div>
</div>
</body>
</html>

Answer 2

试试这个

＆＃13;

<div class="row">
        <div class="col">
            LEFT ONE
        </div>
        <div class="col">
            RIGHT ONE
        </div>
</div>

＆＃13;

Bootstrap 4 beta - cols计算不正确

2 个答案: