Question

我的布局相对简单。顶部有一个标题，nagivation栏左边是一列，左边是内容，右边是内容。

当我切换到移动响应式视图时，我希望导航列能够在默认视图中并排显示nagivation列表和图像，而不是顶部和底部。

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

<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从顶部裁剪较小的图像，虽然我也不介意使用较小尺寸的图像。

任何帮助都将不胜感激。

Answer 1

您应该使用左列内的响应式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）和宽度。

Answer 2

除了ZimSystems答案（我还没有评论）但是如果你使用响应式col类（取决于Bootstrap版本）他是对的你应该能够使用订单类也与响应类一起使用。例如

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

基本上，订单类允许您拉动其他人面前的某些div。这是一个非常受欢迎的功能，现在它就是在页面上订购内容，因此响应它是不真实的：＆＃39;）

这是指向引导命令Documentation

的链接

Answer 3

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

这对你有用。

Bootstrap div彼此相邻，然后在移动视图中彼此相邻

3 个答案: