当两侧的列必须消失时，如何让 Bootstrap 使中心列在所有尺寸下都居中

Question

这可能是一个新手问题，但我已经尝试了各种列规范变体，但未能使页面在所有视口上正常工作。简而言之，当左右列必须消失时，在 sm 视口中查看时，要使三列的中心保持居中。

我的代码如下所示：

    <div class="container">       
        <div class="row hidden-sm hidden-xs">
         <br><br>
        </div>
        <div class="row">
            <div class="col-md-3 text-right hidden-sm hidden-xs" style="padding-top:125px;"> <!-- 190px;> -->
                <i id="prev" class='fa fa-angle-left prevNext'></i>
            </div>
            <div class="col-md-6">
                <div id="owlCarousel" class="owl-carousel">
                </div>
            </div>
            <div class="col-md-3 text-left hidden-sm hidden-xs" style="padding-top:125px;">
                <i id="next" class='fa fa-angle-right prevNext'></i>
            </div>
        </div>  
        <div class="row text-center">
            <div class="col-md-offset-2 col-md-8">
                <img id="savePlace" src="/assets/img/icon_paperclip_sm.png"/>
            </div>
        </div>  
</div>

md 和 lg 尺寸有三列：左列有一个 'previous' 按钮来显示上一张图像，中间列是一个名为 owl 轮播的图像滑块，右列是'next' 按钮。在 sm 和 xs 尺寸下，左列和右列将消失（因为上一个和下一个按钮没有空间）。该页面在 md 和 lg 大小以及 xs 上看起来应该是这样。但是在某些 sm 尺寸的视口上，图像滑块不再居中并移至左边缘。

如何使图像滑块保持在页面居中的中心列中？

Answer 1

编辑

OP的问题让我脑袋放屁。由于当视口变小时会发生这种情况，您可以在 class 上使用媒体查询，仅当它命中 Bootstrap.

中定义的 @small 查询时才生效

编辑

更新代码以反映我的评论。

<div class="container">
<div class="row">
    <div class="col-lg-3 col-md-3 hidden-sm hidden-xs" style="background-color:green">
        <p>Left Column</p>
    </div>
    <div class="col-lg-6 col-lg-offset-0 col-md-6 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-6 col-xs-offset-3" style="background-color:red">
        <p>Center Column</p>
    </div>
    <div class="col-lg-3 col-md-3 hidden-sm hidden-xs" style="background-color:green">
        <p>Right Column</p>
    </div>
</div>

Answer 2

<div class="container">
  <div class="row">
    <div class="col-lg-3 col-md-3 hidden-sm hidden-xs" style="background-color:green">
      <p>Left Column</p>
    </div>
    <div class="col-lg-6 col-md-6 hidden-sm hidden-xs" style="background-color:red">
      <p>Center Column</p>
    </div>
    <div class="hidden-lg hidden-md col-xs-6 col-xs-offset-3" style="background-color:blue">
      <p>Center Column</p>
    </div>
    <div class="col-lg-3 col-md-3 hidden-sm hidden-xs" style="background-color:green">
      <p>Right Column</p>
    </div>
  </div>
</div>

偏移量的唯一问题是它们只需要应用于在较小分辨率下可见的列。请注意，在上面的示例中有 4 列，一列在 md 和 lg 上可见，一列在 md 和 lg 上隐藏。我将偏移量应用于重复的列，因为它们会干扰较大的视图。这是一个显示我在说什么的引导程序：（按紫色桌面切换到渲染模式并尝试调整屏幕大小）

Bootply

当两侧的列必须消失时，如何让 Bootstrap 使中心列在所有尺寸下都居中

How to get Bootstrap to keep central column centred at all sizes when the two side columns must disappear

html

css

twitter-bootstrap

owl-carousel

编辑

编辑