Я хочу показать списки под боковой панели div - PullRequest
Новая
       6

Я хочу показать списки под боковой панели div

0 голосов
/ 21 мая 2018

Я кодирую страницу со списком проектов в начальной загрузке, и я застрял с проблемой. У меня есть боковая панель с фиксированной высотой, где я перечисляю флажки, и у меня есть основной контейнер рядом с боковой панелью, которая перечисляет продукт.По умолчанию область под боковой панелью пуста. стиль по умолчанию

В любом случае я могу перечислить продукты под боковой панелью, как показано в 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>

1 Ответ

0 голосов
/ 21 мая 2018

см. Код ниже (вот скрипка: 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>
...