我想在侧边栏 div 下显示列表

Question

我正在引导程序中编写项目列表页面，但遇到了一个问题。我有一个固定高度的侧边栏，其中列出了复选框，我在侧边栏旁边有一个主容器，其中列出了产品。默认情况下，侧边栏下方的区域是空的。 default style

有没有我可以在侧边栏下列出产品，如this所示

我想在侧边栏下显示列表，并且所有项目都应该在一行中

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */

@import url('//stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css');

aside {
  background: #ddd;
}
.row {
  align-items: flex-start;
}
.col-sm-4 {
  padding-bottom: 25px;
}
img{
  max-width: 100%;
}
ul {
  list-style: none;
  padding-left: 5px;
}

<div class="container">
 <div class="row">
  <aside class="col-sm-3">
    <ul>
      <li>Checkbox</li>
      <li>Checkbox</li>
      <li>Checkbox</li>
      <li>Checkbox</li>
      <li>Checkbox</li>
      <li>Checkbox</li>
    </ul>
  </aside>
  <main class="col-sm-9">
  <div class="row">   
      <div class="col-sm-4">
        <img src="http://via.placeholder.com/150x150">
      </div>
      <div class="col-sm-4">
        <img src="http://via.placeholder.com/150x150">
      </div>
      <div class="col-sm-4">
        <img src="http://via.placeholder.com/150x150">
      </div>
      <div class="col-sm-4">
        <img src="http://via.placeholder.com/150x150">
      </div>
      <div class="col-sm-4">
        <img src="http://via.placeholder.com/150x150">
      </div>
      <div class="col-sm-4">
        <img src="http://via.placeholder.com/150x150">
      </div>
      <div class="col-sm-4">
        <img src="http://via.placeholder.com/150x150">
      </div>
      <div class="col-sm-4">
        <img src="http://via.placeholder.com/150x150">
      </div>
      <div class="col-sm-4">
        <img src="http://via.placeholder.com/150x150">
      </div>
      </div>
  </main>
</div>
</div>

Answer 1

见下面的代码（这里是小提琴：https://jsfiddle.net/7q9hkrcb/）

@import url('//stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css');

aside {
  background: #ddd;
}
body{
  margin-top:20px
}
.row {
  align-items: flex-start;
}
.col-sm-6 {
  padding-bottom: 25px;
}
.col-sm-4 {
  padding-bottom: 25px;
}
img{
  max-width: 100%;
}
ul {
  list-style: none;
  padding-left: 5px;
}

<div class="container">
 <div class="row">
  <aside class="col-sm-4">
    <ul>
      <li>Checkbox</li>
      <li>Checkbox</li>
      <li>Checkbox</li>
      <li>Checkbox</li>
      <li>Checkbox</li>
      <li>Checkbox</li>
       <li>Checkbox</li>
      <li>Checkbox</li>
      <li>Checkbox</li>
      <li>Checkbox</li>
    </ul>
  </aside>
  <div class="col-sm-8">
  <div class="row">   
      <div class="col-sm-6">
        <img src="http://via.placeholder.com/150x150">
      </div>
      <div class="col-sm-6">
        <img src="http://via.placeholder.com/150x150">
      </div>
      <div class="col-sm-6">
        <img src="http://via.placeholder.com/150x150">
      </div>
      <div class="col-sm-6">
        <img src="http://via.placeholder.com/150x150">
      </div>
      
      </div>
      
  </div>
  <div class="col-sm-12">
    <div class="row">   
      <div class="col-sm-4">
        <img src="http://via.placeholder.com/150x150">
      </div>
      <div class="col-sm-4">
        <img src="http://via.placeholder.com/150x150">
      </div>
      <div class="col-sm-4">
        <img src="http://via.placeholder.com/150x150">
      </div>
      <div class="col-sm-4">
        <img src="http://via.placeholder.com/150x150">
      </div>
      
      </div>
  </div>
</div>
</div>