Question

我正在使用bootstrap 2并且我需要有3个跨度，但是中间的那个应该非常小以处理图像以显示/隐藏左侧的跨度。问题是我无法将所有三个跨度放在同一条线上。看起来像图像的跨度占据了所有位置而不仅仅是10px

这是我的代码：

<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>

Answer 1

您可以使用span3，span1和span8占用12列网格并将它们排成一行。使用自定义类指定宽度并删除边距。但是以更高优先级的顺序使用自定义CSS，即新文件，在所有CSS之后加载它，这样就不需要使用!important。尽量避免使用内联样式。

＆＃13;

$('.span1').on('click', function() {
  $('.span3').toggle('slow');
});

＆＃13;

.small-span img {
  margin-left: -15px;
}

＆＃13;

<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>

＆＃13;

带有bootstrap的小跨度div 2

1 个答案: