两个背景重叠滑块/旋转木马和导航引导 [英] Two backgrounds with overlapping slider/carousel and navigation with Bootstrap

查看：178
本文介绍了两个背景重叠滑块/旋转木马和导航引导的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

基本上，我试图让我的资产净值/滑块组合在两个不同颜色的背景重叠在那里你可以调整浏览器的宽度并正确显示。你可以在这里查看当前网站/ code： http://bobbyomari.com/opa

Basically, I'm trying to get my nav/slider combo to overlap on two different color backgrounds where you can resize the browser width and it displays correctly. You can view the current site/code here: http://bobbyomari.com/opa

下面是孤立导航的jsfiddle C>。

Here is a jsfiddle of the isolated nav.

有我有几个问题：


  1. 当基金净值折叠按钮出现，你点击它，滑块滴下来的导航菜单下​​方。我只想说下拉导航切换在滑块重叠，不推滑了下来。

  1. When the nav collapse button appears and you click on it, the slider drops down below the nav menu. I just want that dropdown nav toggle to overlap on the slider, not push the slider down.

下面的身体/包装（主要内容）是使用的margin-top，但调整浏览器的时候，它只是使大量的滑块和包装之间的空间。不知道如何解决这个问题。

The body/wrapper below (main content) is using a margin-top, but when resizing the browser, it just makes a lot of space between the slider and the wrapper. Not sure how to resolve this.

在调整浏览器，蓝色背景不调整滑块（或者它必须是周围的其他方式？）。基本上，我想了蓝色背景，总是在主滑块高度的一半结束。

When resizing the browser, the blue background does not adjust to the slider (or maybe it has to be the other way around?). Basically, I want the blue background to always end at HALF the height of the main slider.

    <div class="header header-margin-top">
<div class="container">

<div class="row">
<div class="col-md-12">
<div class="header-spacing">

    <div class="pull-left">
    <h1 class="logo"> Logo Goes Here</h1>
    </div>

    <div class="pull-right">

    <!-- Report an Absence -->
        <button type="button" class="btn report-an-absence">Report an Absence</button>

    <!-- Parent Portal -->  
        <div class="btn-group"> 
            <button type="button" class="btn parent-portal dropdown-toggle hidden-xs" data-toggle="dropdown">OPA Portal <span class="caret"></span></button>
            <ul class="dropdown-menu parent-dropdown pull-right parent-dropdown-text" role="menu">
                <li><a href="#">Test</a></li>
            </ul>   
        </div>
    </div>
</div>
</div>
</div>

    <nav class="navbar nav-default main-nav" role="navigation">

        <!-- Toggle -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>

        <!-- Nav Links -->  
        <div class="collapse navbar-collapse" id="main-nav-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">About <b class="caret"></b></a>
                    <ul class="dropdown-menu dropdown-nav">
                        <li><a href="#">Dropdown Item 1</a></li>
                        <li><a href="#">Dropdown Item 2</a></li>
                        <li><a href="#">Dropdown Item 3</a></li>
                        <li><a href="#">Dropdown Item 4</a></li>  
                    </ul>
                    </li>                                   
                <li><a href="#">Multiple Intelligences</a></li>
                <li><a href="#">Programs</a></li>
                <li><a href="#">Admissions</a></li>
                <li><a href="#">Honour Society</a></li>
                <li><a chref="#">Contact</a></li>
            </ul>

            <div class="pull-right hidden-xs hidden-sm hidden-md">
            <form class="navbar-form navbar-left search-padding" role="search">
            <div class="form-group">
                <input type="text" class="form-control search-nav" placeholder="Search...">
            </div>
                <button type="submit" class="btn btn-default btn-search"><span class="glyphicon glyphicon-search"></span></button>
            </form> 
            </div>
        </div>
    </nav>


        
            
            
                
                    
                        
                        

测试


                        
                
            
            
            
                
            

Test

        <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">       <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
</div>
</div>


CSS ... 

body {
    background-color: #f2f2f2;
}

.header {
    width: 100%;
    background-color: #000;
    top: 100px;
    max-height: 320px;
    min-height: 100px;
    /* IE10 Consumer Preview */ 
    background-image: -ms-linear-gradient(top, #03B3E7 0%, #008EB8 100%);

    /* Mozilla Firefox */ 
    background-image: -moz-linear-gradient(top, #03B3E7 0%, #008EB8 100%);

    /* Opera */ 
    background-image: -o-linear-gradient(top, #03B3E7 0%, #008EB8 100%);

    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #03B3E7), color-stop(1, #008EB8));

    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-linear-gradient(top, #03B3E7 0%, #008EB8 100%);

    /* W3C Markup, IE10 Release Preview */ 
    background-image: linear-gradient(to bottom, #03B3E7 0%, #008EB8 100%);
}

.logo {
    color: #fff;
    margin-top: 10px;
}

.header-spacing {
    margin-top: 50px;
}

.main-nav {
    margin-top: 30px;
    background-color: #333;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border: none;
    margin-bottom: 0px;
}

.nav-text {
    font-family: "Open Sans", sans-serif;
    font-weight: bold;
}

.nav-text:hover {
    color: #333;
    background-color: #4d4d4d;
}

.navbar .navbar-toggle .icon-bar {
    background-color: #fff;
}

.navbar-nav >li > a {
    font-weight: bold;
}

.navbar-nav > li > a:hover{
  background-color: #4d4d4d;
  color: #fff;
}

.dropdown-menu > li > a {
    color: #fff;
    line-height: 1.5em;
}

.dropdown-menu > li > a:hover {
    color: #fff;
    background-color: #4d4d4d;
}

.dropdown-nav {
    color: #fff;
    background-color: #333;
    border: none;
}

.nav .open > a,
.nav .open > a:hover {
    color: #fff;
    background-color: #4d4d4d;
}

.nav .open > a:focus {
    color: #fff;
    background-color: #333;
}

在此先感谢您的帮助。

Thanks in advance for your help.

推荐答案


  • 1）我已经尝试了很多的选择和可悲的是，你将需要进入引导css文件并找到了一些课程。在 div.navbar崩溃或 ul.navbar-NAV 必须的位置是：绝对; 与的z-index 重叠的其他内容。问题是引导CSS / JS文件覆盖我做，而且似乎有绝对位置显示出来的问题进行任何更改。

  • 1) I have tried a lot of options and sadly you will need to go into the bootstrap css file and find some classes. The div.navbar-collapse or ul.navbar-nav need to be position: absolute; with a z-index to overlap the other content. The problem is the bootstrap css/js files are overwriting any changes I make and seem to have a problem displaying it with position absolute.

    2）在媒体查询， .wrapper ，保证金从的margin-top变化：250像素; 到的margin-top：140px; ，这将允许的空间少了很多激烈的

    2) In your media queries, for .wrapper, change the margin frommargin-top: 250px; to margin-top: 140px;, this will allow the space to be a lot less drastic.

    3）在媒体查询， .header ，您需要更改最大高度：320像素; 为最大高度：270px; 或怎么过多少你认为它需要在中间

    3) In your media queries, for .header, you need to change the max-height: 320px; to max-height: 270px; or how ever much you think it needs to be in the middle.

    这篇关于两个背景重叠滑块/旋转木马和导航引导的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆