Bootstrap div 在彼此下方，然后在移动视图中彼此并排答案

【问题标题】：Bootstrap div below each other and then beside each other in mobile viewBootstrap div 在彼此下方，然后在移动视图中彼此并排
【发布时间】：2018-08-03 13:34:43
【问题描述】：

我的布局比较简单。顶部有一个标题，导航栏左侧有一列内的图像，右侧是内容。

当我切换到移动响应视图时，我希望导航列并排显示导航列表和图像，而不是像默认视图那样上下显示。

到目前为止，我已经使用了以下代码

<div class="row">
    <div class="col-lg-2">
        <div class="row">
            <div class="col-sm-10">
                <ul style="margin-left: 50px;">
                    <li><a href="/news">News</a></li>
                    <li><a href="/events">Events</a></li>
                </ul>
            </div>
            <div class="col-sm10">
                <img src="/images/navbg.png" class="img-fluid">
            </div>
        </div>
    </div>
    <div class="col-lg-9">
        <h3>Blog Title</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    </div>
</div>

使用上面的代码，布局在默认视图中看起来不错，但在较小的响应视图中，我无法让图像出现在无序列表旁边。无序列表和图像就像在默认布局中一样出现在彼此下方，并且占用了大量空间。我还想用 css 从顶部将图像裁剪得更小，尽管我也不介意使用更小尺寸的图像。

任何帮助将不胜感激。

【问题讨论】：

标签： html css bootstrap-4 responsive

【解决方案1】：

<div class="row">
<div class="col-md-3">
    <div class="row">
      <div class="col-xs-12 col-md-12">
        <div class="row">
          <div class="col-md-12 col-xs-8">
              <ul class="m-l-10">
                  <li><a href="/news">News</a></li>
                  <li><a href="/events">Events</a></li>
              </ul>
          </div>
          <div class="col-md-12 col-xs-2">
             <img src="/images/navbg.png" class="img-fluid">
          </div>
        </div>
      </div>
    </div>
</div>
<div class="col-md-9">
    <h3>Blog Title</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
</div>
</div>

这对你有用。

【讨论】：

【解决方案2】：

除了 ZimSystems 答案（我还不能发表评论）但如果您使用响应式 col 类（取决于引导版本）他是对的您应该也可以将 order 类与响应式结合使用类。例如

<div class="col-8 order-2 order-md-1"></div>
<div class="col-4 order-1 order-md-2"></div>

基本上，订单类允许您将某些 div 拉到其他人的前面。是一个非常需要的功能，现在它使得在页面上订购内容变得如此响应它是不真实的:')

这里是引导程序的链接订购Documentation

【讨论】：

【解决方案3】：

您应该使用左栏中的响应式col- 类...

https://www.codeply.com/go/s2HSMmbnkv

<div class="row">
    <div class="col-sm-2 col-12">
        <div class="row">
            <div class="col-sm-10 col-9">
                <ul style="margin-left: 50px;">
                    <li><a href="/news">News</a></li>
                    <li><a href="/events">Events</a></li>
                </ul>
            </div>
            <div class="col-sm-10 col-3">
                <img src="//placehold.it/200" class="img-fluid">
            </div>
        </div>
    </div>
    <div class="col-sm-9">
        <h3>Blog Title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    </div>
</div>

左边的col-sm-2 在最小的屏幕上变成全宽（col-12），然后内列（col-9,col-3）并排。您可能需要根据需要调整断点 (sm) 和宽度。

【讨论】：