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

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未正确显示

问题描述投票：0回答：2

2个回答

最新问题

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

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2