表单域溢出 Bootstrap 表单答案

【问题标题】：Form fields overflow Bootstrap form表单域溢出 Bootstrap 表单
【发布时间】：2016-08-03 06:27:12
【问题描述】：

我正在以简单的形式使用 Bootstrap 网格框架。由于某种原因，表单域似乎溢出了表单边框框。见下图。

这没有意义，因为我所有的表单字段元素都在表单内。我的html在这里。我确保导入 Bootstrap css 和 Bootstrap js。

<div class="container">
    <div class="row">
        <div class="col-md-12">

            <form class="col-md-8 form">
                <h4 class="form-heading">A form</h4>

                <div class="form-group">
                    <div class = "col-md-6">
                        <input type="text" name="input1" class="form-control"/>
                    </div>

                    <div class = "col-md-6">
                        <input type="text" name="input2" class="form-control"/>
                    </div>

                    <div class = "col-md-12">
                        <textarea name="terms" rows="8" class="form-control"></textarea>
                    </div>

                    <div class="col-md-12 text-center">
                        <button type="submit" class="btn btn-lg btn-primary">Submit</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

我的 CSS 在这里。

.form {
    max-width: 100%;
    border: solid black;
    padding-top: 20px;
    margin-top: 30px;
    float: none;
}

.form .form-heading {
    text-align: center;
}

.form .form-control {
    position: relative;
}

input {
    max-width: 100%;
    max-height: 100%;
}

请分享有关修复的任何想法。

【问题讨论】：

标签： html css forms twitter-bootstrap grid

【解决方案1】：

这是由 float 列引起的，就 Bootstrap 而言，这通常可以通过使用 rows 来解决。您正在嵌套列，同时仅对您拥有的所有这些级别的列使用单个 row。我要么使用额外的行，要么自己用 CSS 清除浮动。而且您可能不需要最外层的列。

这也没有多大意义：<form class="col-md-8 form">。您的表单类的宽度设置为 100%，但您使用的列默认设置为宽度 66.66666667%。 form-control 的默认宽度也为 100%。

Documentation

工作示例：

.form {
  border: solid black;
  margin: 20px 0;
  padding: 20px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-8 col-md-offset-2">
      <form class="form">

        <h4 class="form-heading text-center">A Form</h4>

        <div class="row">
          <div class="col-md-6">
            <div class="form-group">
              <input type="text" name="input1" class="form-control" />
            </div>
          </div>

          <div class="col-md-6">
            <div class="form-group">
              <input type="text" name="input2" class="form-control" />
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-md-12">
            <div class="form-group">
              <textarea name="terms" rows="8" class="form-control"></textarea>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-md-12 text-center">
            <div class="form-group">
              <button type="submit" class="btn btn-lg btn-primary">Submit</button>
            </div>
          </div>
        </div>

      </form>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

尝试添加 height: 1000px 以形成类

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
    .form {
    max-width: 100%;
    border: solid black;
    padding-top: 20px;
    margin-top: 30px;
    height: 1000px;
    float: none;
}

.form .form-heading {
    text-align: center;
}

.form .form-control {
    position: relative;
}

input {
    max-width: 100%;
    max-height: 100%;
}
    </style>
    <title>Something</title>
</head>
<body>


<div class="container">
    <div class="row">
        <div class="col-md-12">

            <form class="col-md-8 form">
                <h4 class="form-heading">A form</h4>

                <div class="form-group">
                    <div class = "col-md-6">
                        <input type="text" name="input1" class="form-control"/>
                    </div>

                    <div class = "col-md-6">
                        <input type="text" name="input2" class="form-control"/>
                    </div>

                    <div class = "col-md-12">
                        <textarea name="terms" rows="8" class="form-control"></textarea>
                    </div>

                    <div class="col-md-12 text-center">
                        <button type="submit" class="btn btn-lg btn-primary">Submit</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>


</body>

<script>


</script>
</html>

【讨论】：

【解决方案3】：

col-md 仅适用于中等尺寸的屏幕，因此如果您调整导航屏幕的大小，您会看到一切正常，但如果您想在所有屏幕上保持相同的外观，您只需使用 col-lg-

示例： '

<div class="container">
    <div class="row">
        <div class="col-lg-12">

            <form class="col-lg-8 form">
                <h4 class="form-heading">A form</h4>

                <div class="form-group">
                    <div class = "col-lg-6">
                        <input type="text" name="input1" class="form-control"/>
                    </div>

                    <div class = "col-lg-6">
                        <input type="text" name="input2" class="form-control"/>
                    </div>

                    <div class = "col-lg-12">
                        <textarea name="terms" rows="8" class="form-control"></textarea>
                    </div>

                    <div class="col-lg-12 text-center">
                        <button type="submit" class="btn btn-lg btn-primary">Submit</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

https://jsfiddle.net/8n8wdsvj/

【讨论】：