Small span div with bootstrap 2
I am using bootstrap 2 and I need to have 3 spans, but one of them needs to be very small in order to process the image to show / hide the space on the left. The problem is that I cannot fit all three ranges on one line. Looks like a span with an image takes up all the space, 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>
+3
source to share
1 answer
You can use span3, span1, and span8 to occupy a 12 column grid and align them. Use a custom class to specify the width and remove the margin. But use the custom CSS in higher priority order, i.e. a new file, uploading it after the CSS to avoid using it !important
. Try to avoid inline styles.
$('.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>
0
source to share