如何在滑块内插入响应式表单答案

【问题标题】：How to insert a Rsponsive form inside slider如何在滑块内插入响应式表单
【发布时间】：2016-08-13 06:56:50
【问题描述】：

你好！

我正在使用 ninja-slider 进行响应。现在我有一个引导表单，我想在滑块中显示它，并且该表单应该随着滑块在不同分辨率屏幕上的移动而响应。

我用谷歌搜索了一下，但没有找到任何理想的解决方案。

帮帮我！

html

    <!--start-->
    <div id="ninja-slider">
        <div class="slider-inner">
            <ul>
                <li>
                    <a class="ns-img" href="img/002.jpg"></a>
                    <div class="caption">RESPONSIVE</div>
                </li>
                <li>
                    <a class="ns-img" href="img/003.jpg"></a>
                    <div class="caption">TOUCH·ENABLED</div>
                </li>
                <li>
                    <a class="ns-img" href="img/004.jpg"></a>
                    <div class="caption">VIDEO·AUDIO</div>
                </li>
                <li>
                    <a class="ns-img" href="img/005.jpg"></a>
                    <div class="caption">NON·JQUERY</div>
                </li>
                <li>
                    <a class="ns-img" href="img/zess.jpg"></a>
                    <div class="caption">MOBILE·FRIENDLY</div>
                </li>
            </ul>
            <div class="navsWrapper">
                <div id="ninja-slider-prev"></div>
                <div id="ninja-slider-next"></div>
            </div>
        </div>
    </div>
    <!--end-->

      <form role="form">
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
    <div class="checkbox">
      <label><input type="checkbox"> Remember me</label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>

【问题讨论】：

嘿伙计，你能放个小提琴或 plnkr。
@GandalftheWhite 我可以给你看一张截图。这将是完美的！ ?
我可以告诉你这个 Syed，bootstrap 的响应能力由于它的网格系统而生效，我认为你必须利用它。
我的代码中已经有引导库。我的滑块也反应灵敏。我的问题是，我的表单显示在滑块下方。我只想在滑块内显示它。希望你明白，我到底想要实现什么！

标签： javascript jquery twitter-bootstrap css slider

【解决方案1】：

您可以将表单放在滑块内，它的行为是响应式的，但在移动分辨率中，您需要为滑块提供最小高度。这样表格就不会被隐藏。在CODEPEN查看我的代码

li.dummySlide {
  position: relative;
  width:100%;
  height:100%;
}
.formSection {
  position:absolute;
  max-width:300px;  
  margin:auto;
  left: 0;
  right: 0;
  top:0;
  bottom:0;


}

享受.. :)

【讨论】：