Question

我试图将我的表单放在滑块上，使得滑块似乎在窗体的背景中运行。如果我使用绝对位置，那么我必须应用大量的边距和顶部像素，因为滑块上方有一个导航栏，并且相对于父元素（导航栏）的位置绝对适用。

我怎样才能准确地定位我的形式绝对w.r.t的位置，而不是navbar（父元素）？或

如果你们认为可以有更好的选择来解决这个问题，那么请分享想法！

提前致谢！

HTML code：

    <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>

Answer 1

我有一个使用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：http://www.bootply.com/tNAmbhKWb7

Answer 2

表单中没有包含class="formSection"的包装，您还应从bottom: 0类中删除formSection。

Answer 3

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

您声明<div class="row">

的地方

把这段代码加上 <div class="row" style="position:relative; top:-200px; z-index:3; text-align:center;"

这肯定有效

如何在滑块上放置联系表格

3 个答案: