gpt4 book ai didi

twitter-bootstrap - Bootstrap 表单输入字段和按钮不可点击

转载 作者:太空宇宙 更新时间:2023-11-04 08:34:18 24 4
gpt4 key购买 nike

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

注意:遵循 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;*/
}

`

但是,当我把表格单独放在=>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;
}

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

谢谢!

最佳答案

将大小减小到col-md-6 col-sm-6 col-xs-12(此测量仅用于测试,您必须确定您需要的测量)

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

enter image description here

更新后的答案:当你添加 position: absolute 时,元素从 normalflow 中取出。所以其他元素优先于绝对定位的元素。正常流元素的叠加优先于绝对元素。您也可以使用 z-index 来解决此问题。

添加 z-index: 1;对于具有 position:absolute 的元素。这也将解决您的问题。我认为这会比我一开始提到的方法更容易

enter image description here

关于twitter-bootstrap - Bootstrap 表单输入字段和按钮不可点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44602263/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com