부트 스트랩 양식 입력 필드 및 버튼 클릭 불가

debugcn 에 게시 Dev

Swagnik Dutta

두 개의 입력 필드와 하나의 버튼이있는 양식이 있습니다. 첫 번째 입력 필드는 제대로 작동하지만 두 번째 입력 필드와 버튼은 모두 클릭 할 수 없습니다.

참고 : 스택 오버플로 규정에 따라 모든 코드 펜 링크 뒤에 코드가 표시됩니다. 따라서 게시물이 불필요하게 길어 보일 수 있습니다.

다음 은 페이지 용 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;*/
}

그러나 양식을 개별적으로 => 다른 펜 링크 에 넣으면 제대로 작동하는 것 같습니다 (예 : 동일한 코드이지만 여기에서 입력 필드와 버튼을 클릭 할 수 있음). 아래 코드를 참조하십시오.

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(이 측정은 테스트 용이므로 필요한 측정을 식별해야합니다)

. 이미지에서 강조 표시된 요소가 입력 텍스트 요소와 두 요소를 모두 클릭 할 수 없게 만드는 버튼 위에 오버레이됩니다.

업데이트 된 답변 : position : absolute를 추가하면 요소가 정상 흐름에서 제거됩니다. 따라서 다른 요소는 절대 위치가있는 요소보다 우선합니다. 절대 요소보다 일반 흐름 요소의 오버레이에 우선 순위가 있습니다. Z- 색인을 사용하여이 문제를 해결할 수도 있습니다.

Z- 색인 추가 : 1; position : absolute가있는 요소의 경우. 이것은 당신의 문제도 해결할 것입니다. 제가 처음에 언급했던 접근 방식보다 쉬울 것 같아요

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-19

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

부트 스트랩 양식 입력 필드 및 버튼 클릭 불가

부트 스트랩 양식 입력 필드 및 버튼 클릭 불가

부트 스트랩 jQuery 버튼 및 클릭하여 텍스트 / 입력 필드 전환

버튼 클릭시 입력 필드에 텍스트 추가

프로그래밍 방식으로 텍스트 필드 및 버튼 만들기 버튼 클릭 텍스트 필드 텍스트 가져 오기

양식의 입력, 텍스트 영역 및 버튼을 클릭 할 수 없습니다.

버튼 클릭시 텍스트 필드 및 텍스트 영역 추가

취소 및 제출 버튼이있는 부트 스트랩 모달 팝업 양식, 양식을 클릭 한 버튼에 관계없이 제출

버튼 항목이있는 부트 스트랩 드롭 다운 및 버튼 클릭시 프로그래밍 방식으로 닫힘

Install4j 구성 가능한 양식 텍스트 필드에서 마우스 오른쪽 버튼 클릭

버튼 클릭시 새 레이블 및 텍스트 필드 추가

Django : 버튼 클릭으로 클래스 뷰를 사용하여 추가 입력 필드 추가 및 삭제

양식 그룹 및 Razor HTML 도우미 버튼 정렬 문제가있는 부트 스트랩 양식 수평

부트 스트랩 양식> 입력 필드 그리드 문제> 추가 된 경우에만 작동 함

사용자가 버튼 x를 클릭 할 때 입력 필드 x에 텍스트 추가

부트 스트랩을 사용하여 버튼 클릭에 초점 입력

수평 및 수직 양식 필드가있는 부트 스트랩 양식 만들기

부트 스트랩이있는 HTML 양식 입력 필드에서 maxlength가 작동하지 않음

클릭 이벤트가있는 카드 구성 요소 내부의 부트 스트랩 4 버튼

입력 필드와 버튼으로 부트 스트랩 양식의 전체 행을 채우려면 어떻게해야합니까?

제출을 클릭하면 부트 스트랩 및 PHP 문의 양식에 빈 페이지가 표시됨

부트 스트랩 팝 오버의 버튼 클릭 및 경고 문제

트위터 부트 스트랩 : 양식 내부에 필요한 양식 그룹 클래스입니다.

부트 스트랩 입력 필드의 위치 지우기 버튼

부트 스트랩 버튼이 가로 형식의 텍스트 입력과 같은 행에 없습니다.

버튼을 클릭 한 후 텍스트 필드에 추가

부트 스트랩 모달 입력을 양식에 추가

부트 스트랩 양식-필드를 추가 할 수 없음

HTML을 추가 한 후 부트 스트랩 버튼을 클릭 할 수없는 이유는 무엇입니까?

부트 스트랩 양식 버튼 및 구독 파라 플로팅 문제

부트 스트랩 3 : 동적 양식, 브라우저에서 추가 텍스트 영역 필드 삽입