引导行对齐问题答案

【问题标题】：Bootstrap row align issue引导行对齐问题
【发布时间】：2017-02-14 01:44:07
【问题描述】：

图像应该对齐在一起，这样一排有两张图像，下一行有一张。然而，所有图像都堆叠在彼此之上。我知道这与导航栏有关，因为当导航栏被移除时问题消失了，即使导航栏位于另一个容器中。 JSFiddle link

   <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-sm-12">
                <img src="http://media.istockphoto.com/photos/frog-picture-id175397603?k=6&m=175397603&s=170667a&w=0&h=niKhE-PmYumUHrQa4akcU2cRcmmJMx9_dtWYAcDtJBw=" alt="Smiley face" height="42" width="42">
            </div>
            <div class="col-md-6 offset-md-6 col-sm-12">
                <img src="http://media.istockphoto.com/photos/frog-picture-id175397603?k=6&m=175397603&s=170667a&w=0&h=niKhE-PmYumUHrQa4akcU2cRcmmJMx9_dtWYAcDtJBw=" alt="Smiley face" height="42" width="42">
            </div>
            <div class="col-md-6 col-sm-12">
                <img src="http://media.istockphoto.com/photos/frog-picture-id175397603?k=6&m=175397603&s=170667a&w=0&h=niKhE-PmYumUHrQa4akcU2cRcmmJMx9_dtWYAcDtJBw=" alt="Smiley face" height="42" width="42">
            </div>
        </div>
    </div>

另外请注意，我在导航栏下对齐图像时遇到问题，如果您扩展或缩小结果面板宽度，您可以看到图像。我不确定这个问题是否相关。

【问题讨论】：

你能贴出完整的代码吗？

标签： jquery css twitter-bootstrap twitter-bootstrap-3 grid-layout

【解决方案1】：

我认为在阅读您的 css 时，您只是忘记在导航后的 div 中添加类 main。

JsFiddle：https://jsfiddle.net/hbm23ras/

html 开头

<body>
    <nav class="navbar navbar-inverse sidebar" role="navigation">
        <div class="container-fluid">
             <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
                    <span class="sr-only">Toggle</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Brand</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="">blah<i class="pull-right hidden-xs showopacity" aria-hidden="true" style="font-size:20px;"></i></a></li>
                    <li class="active"><a href="statistics.html">efefefef<i class="pull-right hidden-xs showopacity" aria-hidden="true" style="font-size:20px;"></i></a></li>
                    <li ><a href="">blah<i class="pull-right hidden-xs showopacity" aria-hidden="true" style="font-size:20px;"></i></a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container-fluid main">   // <-------  HERE

【讨论】：