0

ここにページャーのようなものを実装しようとしています:

ここに画像の説明を入力

そして、ここに私のマークアップがあります:

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

中央の列を展開して応答性を維持するように指定するにはどうすればよいですか? 次のようになります。

ここに画像の説明を入力

アップデート ：

span10 は今のところ機能しているようですが、私は正しい div がその親から外れています。なぜこれが起こるのですか？

ここに画像の説明を入力

また、ウィンドウのサイズを変更するときにボタンを側面に保持する方法があるかどうかも知りたいです。こちらが現状です。

ここに画像の説明を入力

4

1 に答える 1

1

行全体を取り上げたいと仮定すると...変更してみてください：

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

に

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

12 列あるので、span1 + span10 + span1 は合計で span12 になります。

jsFiddle を参照してください: http://jsfiddle.net/NzSCH/

于 2013-01-13T16:35:44.017 に答える