Question

我遇到了bootstrap 3.3.5

的问题

我创建了一个简单的网页来测试新的引导程序。这是代码：

<!DOCTYPE html>
<html lang="id">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>BS Test</title>
        <link rel="stylesheet" type="text/css" href="bootstrap.css" />
        <script type="text/javascript" src="script.js" charset="UTF-8"></script>
    </head>
    <body>
    <div class="container-fluid">
    <div class="row">

        <form class="form">
            <div class="form-body">
                <div class="form-group">
                    <input type="text" class="form-control" />
                </div>
            </div>
        </form>

    </div>
</div>
</body>
</html>

类form-control宽度大于浏览器宽度的输入文本，因此底部的滚动条显示..

当<!DOCTYPE html>删除时，所有非常正常的宽度。

如何使用<!DOCTYPE html>解决此问题？

使用doctype：

这没有doctype：

请帮助，谢谢

Answer 1

使用

<div class="container">

而不是

<div class="container-fluid">

Answer 2

问题不在<!DOCTYPE html>。问题是由于缺少 col - * 。请尝试以下代码

<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">
      <form class="form">
        <div class="form-body">
          <div class="form-group">
            <input type="text" class="form-control" />
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

带有输入表单控件宽度的bootstrap doctype未正确显示

2 个答案: