Question

我有一个表单，其中有两个输入字段和一个按钮。第一个输入字段正常工作，但第二个输入字段和按钮都不可点击。

注意：遵循Stack Overflow规则，所有代码组链接后面都有代码。所以帖子可能看起来不必要很长。

此处为该页面的Codepen。请参阅下面的代码。

HTML `

<body>
    <div class="container-fluid">

        <div class="row" id="row-masthead">
            <div class="col-md-12 col-sm-12 col-xs-12">

                <div id="logo-enclosure">
                    <img src="justlogo.png" alt="" id="logo">
                </div>

                <div id="masthead-welcome-note"> 
                    <h1>Wow Your Customers</h1>
                </div>

                <div id="masthead-welcome-note-small">with exceptional customer service. Try Hiver!</div>

                <div id="form-enclosure">
                    <form>
                        <div class="form-group">
                            <label for="input-email">Enter email</label>
                            <input type="email" class="form-control" id="input-email">
                        </div>
                        <div class="form-group">
                            <label for="input-phone">Enter phone</label>
                            <input type="email" class="form-control" id="input-phone">
                        </div>
                        <button type="submit" class="btn btn-default">GET STARTED FOR FREE</button>
                    </form>
                </div>


            </div>
        </div>

        <div class="row" id="row-reviews"> 
            <div class="col-md-12 col-sm-12 col-xs-12"> <!-- column 12-->

                <div id="image-quote-container">
                    <i class="fa fa-quote-left" aria-hidden="true"></i>
                    <div id="circular-image-container">
                        <img src="bean.png" id="circular-image">
                    </div>
                    <div id="quote">
                        Hiver is hands down the best way for us to collaborate on Gmail. Managing our scheduling has never been easier.

                        <footer><strong>Christian Leybold - (General Partner, eVentures.vc)</strong></footer>
                    </div>  
                </div>

                <div id="close-quote-container">
                    <i class="fa fa-quote-right" aria-hidden="true"></i>
                </div>

            </div>
        </div>

        <div class="row">

        </div>

        <div class="row">

        </div>

    </div>
</body>

CSS

body{
    overflow-x: hidden;
    height: 100vh;
}

.container-fluid{
    padding: 0;
}

#row-masthead{
    background-color: #069A78;
    height: 27vh;
}

#logo-enclosure{
    background-color: ;
    margin-top: 1%;
    margin-left: 4%;
}

#logo{
    width: 120px;
    height: 48px;   
}

#masthead-welcome-note h1{
    font-family: 'Ubuntu', sans-serif;
    color: white;
    margin-left: 4%;
    margin-top: 1%;
    font-size: 42px;
    background-color: ;
}
#masthead-welcome-note-small{
    font-family: 'Open Sans', sans-serif;
    margin-top: -0.5%;
    margin-left: 4%;
    font-size: 18px;
    color: white;
    background-color: ;
}

#form-enclosure{
    background-color: white;
    border-radius: 2%;
    padding-top: 15px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 15px;
    width: 25%;
    position: absolute;
    right: 6%;
    top: 48%;
    border-bottom: 1.5px solid #D1D1D1; 
    border-right: 1px solid #D3D3D3;
}

#form-enclosure > form > div > label{
    color: #B0A9A9;
    font-weight: normal;
    font-size: 13px;
}

#form-enclosure > form > div > input{
    background-color: #F3F3F3;
    border-color: #ECECEC;
}

#form-enclosure > form > button{
    width: 100%;
    height: 2.8em;
    color: white;
    background-color: #E87A06;
    border: none;
    font-weight: bold;
    font-size: 12px;
}

#row-reviews{
    height: 30vh;
    background-color: #F6F6F6;

    /*border: 1px solid lightgrey;*/
}

#row-reviews > div{   /* this is the column inside the row */
    height: 100%;     /* the column should take full height of the row ie  30vh */
    background-color: ;
    display: flex;
    justify-content: left;
    align-items: center;
}

#image-quote-container{
    margin-left: 4%;
    width: 52%;
    height: 90%; 
    position: relative; /*relative parent*/

    /*border: 1px solid lightgrey;*/
}

i.fa-quote-left{
    font-size: 30px;
    color: lightgrey;
    margin-top: 4%;
    float: left;
    width: 3%; /* to prevent jumping effect*/

    /*background-color: plum;
    border: 1px solid black;*/
}

#circular-image-container{
    margin-left: 3%;    /* moving bean image right from open quote*/
    margin-top: 6%;     /* moving bean image bottom from its reference point ie parent div*/
    margin-right: 5%;   /* maintain distance between image and texts on the right*/ 
    float: left;
}

#circular-image{
    width: 100px;
    height: 100px;
    border-radius: 50%;

    border: 1px solid #E4E4E4;
}

#quote{
    margin-top: 7%;
    font-family: 'Open Sans', sans-serif;
    font-style: italic;
    font-size: 14px;
    text-align: justify;
    color: #7f8c8d; /* grey color for text */       

    /*border: 1px solid black;*/
}

footer{
    font-style: normal;
    font-size: 12px;
    color: #2c3e50;
    margin-top: 2%;
}

#close-quote-container{
    width: 3%;
    height: 90%; 
    position: relative; /* relative parent for absolute close quote*/

    /*border: 1px solid lightgrey;*/
}

i.fa-quote-right{
    font-size: 30px;
    color: lightgrey;
    position: absolute;
    left: 0;
    bottom: 0;

    /*border: 1px solid black;*/
}

`

但是，当我将表格分别放在=＆gt; Another pen link它似乎工作正常（即相同的代码，但这里输入字段和按钮是可点击的）。请参阅以下代码：

HTML

<body>
  <div id="form-enclosure">
                    <form>
                        <div class="form-group">
                            <label for="input-email">Enter email</label>
                            <input type="email" class="form-control" id="input-email">
                        </div>
                        <div class="form-group">
                            <label for="input-phone">Enter phone</label>
                            <input type="email" class="form-control" id="input-phone">
                        </div>
                        <button type="submit" class="btn btn-default">GET STARTED FOR FREE</button>
                    </form>
                </div>
</body>

CSS

body{
  background-color: plum;
}

#form-enclosure{
    background-color: white;
    border-radius: 2%;
    padding-top: 15px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 15px;
    width: 25%;
    position: absolute;
    right: 35%;
    top: 30%;
    border-bottom: 1.5px solid #D1D1D1; 
    border-right: 1px solid #D3D3D3;
}

#form-enclosure > form > div > label{
    color: #B0A9A9;
    font-weight: normal;
    font-size: 13px;
}

#form-enclosure > form > div > input{
    background-color: #F3F3F3;
    border-color: #ECECEC;
}

#form-enclosure > form > button{
    width: 100%;
    height: 2.8em;
    color: white;
    background-color: #E87A06;
    border: none;
    font-weight: bold;
    font-size: 12px;
}

我无法理解这种行为。请帮助我理解我做错了什么。

谢谢！

Answer 1

将尺寸缩小到col-md-6 col-sm-6 col-xs-12（此测量仅用于测试，您必须确定所需的测量值）

图像中突出显示的元素将叠加在输入文本元素和使两个元素都不可点击的按钮上

更新答案： 添加position：absolute时，元素将从normalflow中取出。因此其他元素优先于具有绝对定位的元素。正常流元素的覆盖优先于绝对元素。您还可以使用z-index来解决此问题。

添加z-index：1;对于有位置的元素：绝对。这也将解决您的问题。我认为这比我最初提到的方法更容易

Bootstrap表单输入字段和按钮Unclickable

1 个答案: