我使用的是bootstrap 2,我需要有3个跨度,但是中间的那个应该非常小,可以处理一个图像来显示/隐藏左边的跨度。
问题是我不能把三个跨度都放在同一条线上。看起来这幅图片的跨度已经占据了所有位置,而不仅仅是10像素
这是我的代码:
<style>
.myspan {
width:10px;
}
<div class="container-fluid">
<div class="row-fluid">
<div class="span3" style="background-color: red">this is fluid</div>
<div class="myspan"><img src="~/Images/bullet.png" /></div>
<div class="span9" style="background-color: blue">yeah!</div>
</div>
</div>
最佳答案
可以使用span3、span1和span8来占据12个柱网轴线并将它们对齐。使用自定义类指定宽度并删除边距。但是,使用自定义CSS时,要按照更高的优先级顺序,即新文件,在所有CSS之后加载它,这样就不需要使用!important
。尽量避免内联样式。
$('.span1').on('click', function() {
$('.span3').toggle('slow');
});
.small-span img {
margin-left: -15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row-fluid">
<div class="span3" style="background-color: tomato">this is fluid</div>
<div class="span1 small-span">
<img src="http://placehold.it/25x25" />
</div>
<div class="span8" style="background-color: lightblue">yeah!</div>
</div>
</div>
关于html - 带 bootstrap 的小跨度div 2,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31101444/