Javascript 折叠时,引导面板中的背景图像会移动
我在Bootstrap的手风琴面板上遇到了一个小问题。由于某些原因,当单击第一个面板时,Javascript 折叠时,引导面板中的背景图像会移动,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我在Bootstrap的手风琴面板上遇到了一个小问题。由于某些原因,当单击第一个面板时,面板主体内的背景图像将临时推到屏幕右侧。我试图通过添加边距left:0和left:0来修复它,但根本没有影响它。如果有任何帮助,我将不胜感激。谢谢 我的HTML: <div class="panel-group" id="accordion"> <div class="panel panel-default">
面板主体内的背景图像将临时推到屏幕右侧。我试图通过添加边距left:0
和left:0
来修复它,但根本没有影响它。如果有任何帮助,我将不胜感激。谢谢
我的HTML:
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div id="collapseOne" class="panel-collapse collapse in bgImg1">
<div class="panel-body">
<div class="collapse1 ">
<div class="col-md-12 ">
<div class="row">
<div class="col-md-6 col-md-push-6">
<div class="introText">
<hr />
<hr />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg1 closedPanel activePanel">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
<h4 class="panel-title caps">
<a>
Hear the News
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
</h4>
</div>
</div>
</div>
<!-- end panel -->
<div class="panel panel-default">
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<div class="collapse2">
<div class="row">
<div class="col-md-6 col-md-push-6">
<div class="introText">
<hr/>
<h2 class="caps">SEE WHAT WE</h2>
<h1 class="caps">CHANGED</h1>
<hr/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg2 closedPanel">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
<h4 class="panel-title caps">
<a>
See What We Changed
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
</h4>
</div>
</div>
</div>
<!-- end panel -->
<div class="panel panel-default">
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<div class="collapse3">
<div class="row">
<div class="col-md-6">
<img src="img/coupon-tubs.png" class="tubsCoupon">
</div>
<div class="col-md-6">
<div class="introText">
<hr/>
<h2 class="caps">ENJOY A LITTLE</h2>
<h1 class="caps">INCENTIVE.</h1>
<hr/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg3 closedPanel">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
<h4 class="panel-title caps">
<a class="coupon">Get A Coupon
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
</h4>
</div>
</div>
</div>
<!-- end panel -->
</div>
你需要改变背景图像的位置正确。。!在css中使用背景位置
属性..嘿,谢谢你的回复。原来问题的发生是因为面板上方的主导航。与引导代码无关。必须在主导航的CSS中更改一些内容,从而解决了问题。谢谢
.collapse1{
background: url("../img/bg1.jpg");
background-repeat: no-repeat;
width: 1020px;
height: 569px;
margin-left: 0;
left: 0;
}
.collapse2{
background: url("../img/bg2.jpg");
background-repeat: no-repeat;
width: 1020px;
height: 569px;
}
.collapse3{
background: url("../img/bg3.jpg");
background-repeat: no-repeat;
width: 1020px;
height: 569px;
}
.panel-group{
margin-top:3px;
}
.activePanel {
display:none;
}