슬라이더에 연락처 양식을 붙이는 방법

슬라이더가 양식의 배경에서 실행되는 것처럼 보이도록 양식에 슬라이더를 넣으려고합니다. 위치 절대 값을 사용하는 경우 슬라이더 위에 탐색 막대가 있고 부모 요소 (navbar)와 관련하여 절대 위치가 적용되므로 여백과 위쪽 픽셀을 많이 적용해야합니다.슬라이더에 연락처 양식을 붙이는 방법

navbar (부모 요소)가 아닌 내 양식의 절대 위치를 정확히 타겟팅하려면 어떻게해야합니까? 또는

여러분이 생각하는 경우 더 좋은 방법이있을 수 있다고 생각하고 아이디어를 공유하십시오!

미리 감사드립니다.

<section id="main-slider" class="carousel"> 


    <!--start--> 
    <div id="ninja-slider"> 
     <div class="slider-inner"> 
      <ul> 
       <li class="dummySlide"> 
        <a class="ns-img" href="img/002.jpg"></a> 
       </li> 




       <li> 
        <a class="ns-img" href="img/003.jpg"></a> 
       </li> 

       <li> 
        <a class="ns-img" href="img/004.jpg"></a> 
       </li> 

       <li> 
        <a class="ns-img" href="img/005.jpg"></a> 
       </li> 

       <li> 
        <a class="ns-img" href="img/zess.jpg"></a> 
       </li> 
      </ul> 
      <div class="navsWrapper"> 
       <div id="ninja-slider-prev"></div> 
       <div id="ninja-slider-next"></div> 
      </div> 
     </div> 
    </div> 
    <!--end--> 



    </section><!--/#main-slider--> 

      <form role="form"> 

<!--First Row--> 
    <div class="row"> 
     <div class="form-group col-md-6"> 
      <label for="inputTopic" class="control-label">Title</label> 
      <select class="form-control" name="title"> 
        <option value="0">Select</option> 
        <option value="one">Mr.</option> 
        <option value="two">Miss</option> 
        <option value="three">Mrs.</option> 
        <option value="four">Dr.</option> 
       </select>  
     </div> 

     <div class="form-group col-md-6"> 
      <label for="inputTopic" class="control-label">Sur-Name</label> 
       <input type="text" class="form-control" name="surname" /> 
     </div> 
    </div> 
</form>

출처

2016-08-15 bc110402307 Syed Zeeshan Haide

공동 uld 당신은 여기 (또는 * not *) 작업 예제를 만들거나 jsfiddle please, 여기서 우리는 당신을 도울 수 있습니다. 그것을 보지 않고 말할 수 없습니다. 특히 당신의 CSS가 없으면 ... – eisbehr

@eisbehr 여기에 링크가 있습니다 https://codepen.io/zeeshan55/pen/NAoLgG –

왜 TWBS의 회전 목마를 사용하지 않습니까? 이미 사용중인 경우 추가 플러그인이 필요 없습니다. http://getbootstrap.com/javascript/#carousel을 참조하십시오. –

나는 TWBS의 회전 목마를 사용하는 작업 예제가 있습니다. 슬라이더와 양식을 자식으로 갖는 래퍼 .container을 만들었습니다. 슬라이더는 전체 폭이며 양식의 너비는 70%이므로 항상 응답하며 높이는 정적입니다. 미디어 쿼리를 사용하여 변경할 수 있습니다.

<div class="container"> 
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
</div> 
<div class="myform"> 
    <h1> My Form </h1> 
    <form> 
     ... 
    </form> 
</div> 
</div>

Bootply : 여기 내 예를 들어 당신이 코드
<div class="row" style="position:relative; top:-200px; z-index:3; text-align:center;"

을 넣어 <div class="row">

를 선언 http://www.bootply.com/tNAmbhKWb7

출처

2016-08-15 08:22:19

내가 열심히 노력하자! –

아니요, 양식에 많은 필드가있어서 작은 화면에서 슬라이더 바깥으로 나오기 때문에 해결책이 아닙니다. –

부탁을합니까? 내 Codeopen 링크를 방문하여이 데모에서했던 것처럼 내 코드를 편집하여 동일한 작업을 수행 할 수 있는지 확인하십시오. –

양식에 대한 class="formSection"와 래퍼가없는 또한 당신이 bottom: 0formSection에서 클래스를 삭제해야합니다 : 여기

는 demo link

HTML 코드입니다.

출처

2016-08-15 07:29:48 ribaa

아니요! 그건 단지 하나의 li (목록 항목) 안에 내 양식을 표시하는 데 도움이됩니다. 양식에서 슬라이드가 움직이면 사라집니다. 하지만 슬라이드가 계속 움직이더라도 폼을 고정시키고 싶습니다! –

또한 내 코드에서 class = "formSection"을 사용하지 않습니다. –

http://codepen.io/anon/pen/OXdozJ – ribaa

<div class="row" style="position:relative; top:-200px; z-index:3; text-align:center;">

이 확실히 작동합니다

출처

2017-06-06 21:16:43

슬라이더에 연락처 양식을 붙이는 방법

답변

관련 문제