html - 当两侧的立柱必须消失时，如何使Bootstrap使中央立柱保持在所有尺寸的中心

这可能是一个新手问题，但我尝试了各种列规格的变化，但未能使页面在所有视口上正常工作。简而言之，问题是当在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大小下，共有三列：左列有一个“上一个”按钮以显示前一个图像，中间列是一个称为owl carousel的图像滑块，右列是“下一个”按钮。使用sm和xs大小时，左列和右列将消失（因为上一个和下一个按钮没有空间）。该页面在md和lg大小以及xs下看起来应该是正确的。但是在某些以sm尺寸显示的视口中，图像滑块不再居中，而是移到左侧边缘。

如何使图像滑块在页面中央居中？

最佳答案

编辑

在OP的问题上，我很放屁。由于它是在视口变小时发生的，因此您可以在类上使用媒体查询，仅在其遇到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>

关于html - 当两侧的立柱必须消失时，如何使Bootstrap使中央立柱保持在所有尺寸的中心，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27868779/