当我将图像放下时，Bootstrap切换按钮不起作用

时间：2017-01-08 07:37:31

标签： css twitter-bootstrap

我是网络设计的新手，我尝试使用自举切换按钮，但是当我将图像放下时，它不起作用，我认为内容显示在该图像的背面

这是css和html，你可以运行代码snipet来看看会发生什么。

＆＃13;
＆＃13; 
.mynavbar{
	height: 83px !important;
	font-family: 'Raleway',verdana !important;
	background: rgb(238,238,238) !important;
	margin-bottom: 0px;
}

.mynavbar>.container-fluid>.navbar-collapse>ul{
	margin-top: 15px;
}

.mynavbar>.container-fluid>.navbar-header>div>.navbar-brand{
    margin-top: 15px;
}

.blabla{
	position: relative;
	font-family: 'Old Standard TT',serif;
}

.inner {
	text-align: center;
	color:white;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
＆＃13; 
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Hi</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script type="text/javascript">
</script>


</head>
<body>
<nav class="navbar navbar-default mynavbar">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#togglebutton">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <div class="vRef">
        <a class="navbar-brand" href="#">Company Name</a>
      </div>
    </div>
    <div class="collapse navbar-collapse" id="togglebutton">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Us </a></li>
        <li><a href="#">Login </a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Service <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Contact</a></li>
            <li><a href="#">Action</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<div class="container-fluid">
  <div class="row">
    <div class="blabla">
      <img src="http://static.panoramio.com/photos/original/182912.jpg" class="img-responsive" alt="website template image">
      <div class="inner"><h1>My Company Name</h1><br/><h4>Some thing about m company</h4></div>
    </div>
  </div>
</div>


</body>
</html>
＆＃13;
＆＃13;
＆＃13;

我知道css代码中的某些内容是错误的，就在我使用.blabla和.inner类将文本居中时。但我需要这个，而且我不知道怎么做而不杀死切换按钮功能。

任何方向？

抱歉我的英文不好，谢谢。

4 个答案:

答案 0 :(得分：2)

您无法看到切换菜单的原因是您使用height: 83px !important;强制导航栏的高度导航切换实际上会使高度更大以显示隐藏的元素。

将.mynavbar的代码更改为使用min-height: 83px;而不是!important样式

<强> JSFIDDLE

答案 1 :(得分：1)

您为.mynavbar定义了固定高度。您需要删除它并使margin-bottom: 0 !important删除菜单和图像之间的间隙。要根据需要制作视图，您可以添加padding-bottom: 20px;。

看一下片段

＆＃13;
＆＃13; 
.mynavbar{
	font-family: 'Raleway',verdana !important;
	background: rgb(238,238,238) !important;
	margin-bottom: 0px !important;
    padding-bottom: 20px;
}

.mynavbar>.container-fluid>.navbar-collapse>ul{
	margin-top: 15px;
}

.mynavbar>.container-fluid>.navbar-header>div>.navbar-brand{
    margin-top: 15px;
}

.blabla{
	position: relative;
	font-family: 'Old Standard TT',serif;
}

.inner {
	text-align: center;
	color:white;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
＆＃13; 
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Hi</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script type="text/javascript">
</script>


</head>
<body>
<nav class="navbar navbar-default mynavbar">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#togglebutton">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <div class="vRef">
        <a class="navbar-brand" href="#">Company Name</a>
      </div>
    </div>
    <div class="collapse navbar-collapse" id="togglebutton">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Us </a></li>
        <li><a href="#">Login </a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Service <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Contact</a></li>
            <li><a href="#">Action</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<div class="container-fluid">
  <div class="row">
    <div class="blabla">
      <img src="http://static.panoramio.com/photos/original/182912.jpg" class="img-responsive" alt="website template image">
      <div class="inner"><h1>My Company Name</h1><br/><h4>Some thing about m company</h4></div>
    </div>
  </div>
</div>


</body>
</html>
＆＃13;
＆＃13;
＆＃13;

另一种方法是，如果您不想更改菜单的高度，请将z-index: -1;添加到.blabla课程，但是您需要在子菜单中添加背景

＆＃13;
＆＃13; 
.mynavbar{
	height: 83px !important;
	font-family: 'Raleway',verdana !important;
	background: rgb(238,238,238) !important;
	margin-bottom: 0px;
}

.mynavbar>.container-fluid>.navbar-collapse>ul{
	margin-top: 15px;
	background: rgb(238,238,238) !important;
}

.mynavbar>.container-fluid>.navbar-header>div>.navbar-brand{
    margin-top: 15px;
}

.blabla{
	position: relative;
	font-family: 'Old Standard TT',serif;
  z-index: -1;
}

.inner {
	text-align: center;
	color:white;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
＆＃13; 
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Hi</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script type="text/javascript">
</script>


</head>
<body>
<nav class="navbar navbar-default mynavbar">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#togglebutton">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <div class="vRef">
        <a class="navbar-brand" href="#">Company Name</a>
      </div>
    </div>
    <div class="collapse navbar-collapse" id="togglebutton">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Us </a></li>
        <li><a href="#">Login </a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Service <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Contact</a></li>
            <li><a href="#">Action</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<div class="container-fluid">
  <div class="row">
    <div class="blabla">
      <img src="http://static.panoramio.com/photos/original/182912.jpg" class="img-responsive" alt="website template image">
      <div class="inner"><h1>My Company Name</h1><br/><h4>Some thing about m company</h4></div>
    </div>
  </div>
</div>


</body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

如果您的意思是菜单不可见，请将z-index添加到.mynavbar并将此类作为相对位置。选中 fiddle 

namespace Google\AdsApi\Examples\AdWords\v201609\Optimization;

require 'vendor/autoload.php';

use Google\AdsApi\AdWords\AdWordsServices;
use Google\AdsApi\AdWords\AdWordsSession;
use Google\AdsApi\AdWords\AdWordsSessionBuilder;
use Google\AdsApi\AdWords\v201609\cm\Keyword;
use Google\AdsApi\AdWords\v201609\cm\KeywordMatchType;
use Google\AdsApi\AdWords\v201609\cm\Language;
use Google\AdsApi\AdWords\v201609\cm\Location;
...

答案 3 :(得分：0)

在你的css改变中：

.inner {
Text-align: center;
Color:white;
    Position: absolute;
    Left: 50%;
    Top: 50%;
    Transform: translate(-50%, -50%);
}

要

.inner {
Text-align: center;
Color:white;
    Position: absolute;
    Left: 50%;
    Top: 50%;
    Margin-right: -50%
    Transform: translate(-50%, -50%);
}

您需要保证金权利来弥补剩余的保证金，并且因为它会使您的div响应

相关问题
最新问题