Question

我在bootstrap中编写了一个项目列表页面并且我遇到了问题。我有一个固定高度的侧边栏，我列出了复选框，我在侧边栏旁边有一个主容器列出产品。默认情况下，侧栏下的区域为空。 default style

无论如何，我可以在侧边栏下列出产品，如this

所示

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

＆＃13;

tflite

＆＃13;

/* 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;
}

＆＃13;

Answer 1

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

＆＃13;

@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;
}

＆＃13;

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

＆＃13;

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

1 个答案: