html - 表单控件中的 Bootstrap 输入文本占用了一些不需要的边距

标签 html css twitter-bootstrap twitter-bootstrap-3

我想使用 bootstrap 创建一个表单。 当试图创建它时,它在输入的右侧给出了不需要的边距。我试图检查浏览器控制台中的边距。这可能是一件小事,但无法弄清楚。我还附上了屏幕截图。

   <div class="col-lg-8 col-md-8 col-sm-12">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div id="tenantForm" class="container">
                        <center> <h4>Login Form</h4></center>
                        <hr />

                        <form>
                            <div class="form-group">
                                <label for="email">Email address:</label>
                                <input type="email" class="form-control" id="email">
                            </div>
                            <div class="form-group">
                                <label for="pwd">Password:</label>
                                <input type="password" class="form-control" id="pwd">
                            </div>
                            <div class="checkbox">
                                <label><input type="checkbox"> Remember me</label>
                            </div>
                            <button type="submit" class="btn btn-default">Submit</button>
                        </form>
                    </div>
             </div>
    </div>
<div>

This the issue happening with the input text

最佳答案

删除类 container来自 <div id="tenantForm" class="container">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-lg-8 col-md-8 col-sm-12">
  <div class="panel panel-default">
    <div class="panel-body">
      <div id="tenantForm">
        <center>
          <h4>Login Form</h4>
        </center>
        <hr />

        <form>
          <div class="form-group">
            <label for="email">Email address:</label>
            <input type="email" class="form-control" id="email">
          </div>
          <div class="form-group">
            <label for="pwd">Password:</label>
            <input type="password" class="form-control" id="pwd">
          </div>
          <div class="checkbox">
            <label><input type="checkbox"> Remember me</label>
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
      </div>
    </div>
  </div>
</div>

关于html - 表单控件中的 Bootstrap 输入文本占用了一些不需要的边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46924227/

相关文章:

html - 如何在表格中创建一个集成行?

css - 透明图像上的阴影和背景色

html - 我的 Bootstrap 网站在右侧显示一个空的可滚动空白区域

javascript - 使用 jQuery 检测 Bootstrap 模式中加载的图像

html - 使用 CSS 将图像水平居中

html - 我怎样才能让我的垂直线完全适合我的 div?

css - 为什么我的溢出省略号在 Chrome 中被截断了?

html - 如何垂直对齐div中的文本?

javascript - css 中的隐藏元素在通过 Javascript 函数使用 onclick 事件切换时显示

javascript - 可调整大小且灵活的输入表单