javascript - Bootstrap 表格不工作

Question

我不确定哪里出错了，但我的 Bootstrap 表单无法正常工作，因为我无法在表单框中输入任何内容。如果我将表单框移到从顶部开始的第三个 div 上方，则电子邮件框可以工作，如果我将它们移动到从顶部开始的第二个 div 上方，则两个框都可以工作。任何人都可以解释发生了什么以及如何解决这个问题吗？

<div class ="container" style= "height:150px;">
    <div id="Logo" class="col-xs-12 col-md-11">
        <img id="CashPass" src="assets/images/CashPassLogo (2).png"/>
    </div>
</div>

<div class="container" style= "height:500px;" id="intro">
    <div id="HomeTopContainer" class="col-xs-12 col-md-8">
        <h3>
            Something <i>Something</i>
        </h3>
        <img id="Something" src="https://abc123.jpg"/>
    </div>



    <div id="signup"> <!--style="height:500px; padding-right: 10%;"-->
        <div class="col-xs-6 col-md-4">
            <h1 class="hit">
                Something
            </h1>
            <form class="form" name="form" ng-submit="signUp()" novalidate>
                <div  class="form-group"
                      ng-class="{ 'has-success': form.email.$valid && submitted, 'has-error': form.email.$invalid && submitted }">
                    <!--<label>Email</label>-->
                    <input type="email" name="email" class="form-control" placeholder = "Email" ng-model="user.email" required/>
                </div>

                <div class="form-group"
                     ng-class="{ 'has-success': form.password.$valid && submitted, 'has-error': form.password.$invalid && submitted }">
                    <!--<label>Password</label>-->
                    <input type="password" name="password" class="form-control" placeholder = "Password" ng-model="user.password"
                           ng-minlength="3"
                           required/>
                    <p class="help-block"
                       ng-show="(form.password.$error.minlength || form.password.$error.required) && submitted">
                        Password must be at least 3 characters.
                    </p>
                </div>
            </form>
        </div>
    </div>


    <div class= "hit">
        <button class="btn btn-inverse btn-lg btn-login" id = "Join" type="submit">
            Join
        </button>
        <a class="btn btn-default btn-lg btn-register" id = "login" href="/stuff">
            Login
        </a>
    </div>

SCSS如下:

.hit {
  position: relative;
  padding: 30px 15px;
  /*color: #F5F5F5;*/
  text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  /*background: #4393B9;*/
  .center-block{};
}

.center-block {
  font-size: 5em;
  width: 150px;
  height: 150px;
  text-align: center;
};


/*id*/


#intro {
  background-color: #add8e6;
}

#glyphicon{
  text-align: right;
  font-size: 5em;
}

#HomeTopContainer {
  text-align: center;
}

#signup{
  margin-left: auto;
  margin-right: auto;
}

#bottomborder{
  height: 75px;
  background-color: #19469D;
  margin-top: -7px;
  text-align: center;
  font-size: 20px;
}

Answer 1

你基本上有相互重叠的元素。您的类(class) .hit 堆叠在您的其他容器之上(如果您允许显示浅绿色背景颜色，您可以看到它)要解决此问题，请添加此 CSS:

#signup {
    position: relative;
    z-index: 10;
}