Question

我想使用Twitter Bootstrap重新制作此页面（bobabear.com）。我已经完成了大部分工作，但我无法弄清楚如何使用模态进行内联并向左或向右滑动，因为单击了不同的标题链接。我是Bootstrap的新手，我正在努力进一步发展我的技能，所以任何帮助都是非常感激的。

我的css看起来像这样：

<style type="text/css">
@import url('http://fonts.googleapis.com/css?family=Niconne');
@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:300);
@media only screen and (min-width : 768px) {
/* Make Navigation Toggle on Desktop Hover */
  .dropdown:hover .dropdown-menu {
    display: block;
}
}

body { 
  padding-top: 3em;
  background-image: url("http://i1074.photobucket.com/albums/w408/5b45cbba/Unknown_zpsuqd7guy6.jpeg");
  background-color: #86cccd;
}

ul.dropdown-menu{
  background-color: #86cccd;
}

.navbar {
  background-color: #86cccd;
  font-size: .8em;
  border-color: #86cccd;
  color: #ffffff !important;
  padding-top: 3em;
  padding-bottom: 3em;
} 

.navbar a {
  color: white !important;
}

.dropdown-menu {
  border-color: #86cccd;
  border-radius: 0px;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: #86cccd;
  text-decoration: none;
  background-color: #86cccd;  /*change color of links in drop down here*/
}

.panel-footer {
  background-color: #86cccd;
  border-color: #86cccd;
}

.footer-align {
  text-align: center;
  color: white;
}
.navbar a {
  color: white !important;
}

.modal-content{
  -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0);
        -moz-box-shadow: 0 5px 15px rgba(0,0,0,0);
        -0-box-shadow: 0 5px 15px rgba(0,0,0,0);
  box-shadow: 0 5px 15px rgba(0,0,0,0);
}
</style>

我的模态看起来像这样：

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
 <div class="modal-dialog custom-class">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
  </div>
  <div class="modal-body">
    ...
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>
</div>
</div>

然后我把底部的这个JS放在没有阴影的情况下进行模态加载。

我要做的是在点击不同的导航栏项目时使用模态滑入和滑出视口。非常感谢万亿提供任何帮助。

Answer 1

您可以使用类似cycle.js或bxslider的滑块/轮播进行设置。它们每个都使用和无序列表作为寻呼机。您可以使用它来创建导航菜单。

如何使引导模态从屏幕上滑落？

1 个答案: