Question

I am trying to implement something like a pager here:

And here’s my markup:

<div id="tour-marker-icon-container" class="pagination-centered row-fluid">

    <div class="span1">
        <button class="btn"><i class="icon-arrow-left"></i></button>
    </div>

    <div class="span6" id="current-marker-icon-page" data-page-id="1">
        @foreach (var markerIcon in Model)
        {
            <img src="@Url.Content(markerIcon.Path)" data-id="@markerIcon.Id" class="marker-icon"/>
        }
    </div>

    <div class="span1">
        <button class="btn"><i class="icon-arrow-right"></i></button>
    </div>
</div>

How can I specify the middle column to expand and still keep it responsive? It should look like this:

Update :

span10 seems to work for now but I the right div is out of its parent. Why does this happen?

Also I want to know if there is a way to keep buttons on sides when I resize the window. Here’s the current situation.

Answer 1

Assuming that you want to take up the entire row…
Try changing:

<div class="span6" id="current-marker-icon-page" data-page-id="1">

to

<div class="span10" id="current-marker-icon-page" data-page-id="1">

There are 12 columns, so span1 + span10 + span1 will give you a total of span12

See the jsFiddle: http://jsfiddle.net/NzSCH/