small span div with bootstrap 2 - html

Question

i'm using bootstrap 2 and I need to have 3 span, but the one in the middle should be really small to handle an image to show/hide the span on the left.
The problem is that I can't put all three span on the same line. Looks like the span with the image is taking the all place and not just 10px
Here is my code:
<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

You can use span3, span1 and span8 to occupy the 12 column grid and line them up. Use a custom class to specify a width and remove the margin. But use the custom CSS in a higher priority order i.e. new file, loading it after all the CSS so that you need not use !important. Try to avoid inline styles as well.
$('.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>