wordpress - 使用 Bootstrap 的类别部分

Question

我发现很难在特色广告旁边放置特色广告来实现 L 形类别部分。我使用 bootstrap 是因为它具有响应性，这是我知道的唯一选择。

请在这里SAMPLE IMAGE我正在努力实现的目标。

还有这些是我的代码行:

        <div class="container">
        <div class="row">
  <div class="col-xs-4 col-sm-3 col-md-2"><a href="#"><i class="fa fa-car fa-5x" style="background-color: #6fbf4e;"></i><br> <center>CARS</a></div>
  <div class="col-xs-4 col-sm-3 col-md-2"><a href="#"><i class="fa fa-television fa-5x" style="background-color: #556266;"></i><br> <center>ELECTRONICS</a></div>
  <div class="col-xs-4 col-sm-3 col-md-2"><a href="#"><i class="fa fa-headphones fa-5x" style="background-color: #eb686e;"></i><br> <center>ENTERTAINMENT</a></div>
  <div class="col-xs-4 col-sm-3 col-md-2"><a href="#"><i class="fa fa-briefcase fa-5x" style="background-color: #4a8c9c;"></i><br><center>JOBS</a></div>
  <div class="col-xs-4 col-sm-3 col-md-2"><a href="#"><i class="fa fa-home fa-5x" style="background-color: #1693eb;"></i><br> <center>REAL ESTATE</a></div>
  <div class="col-xs-4 col-sm-3 col-md-2"><a href="#"><i class="fa fa-cutlery fa-5x" style="background-color: #fc011f;"></i><br> <center>RESTAURANTS</a></div>
  </div>
  <div class="row">
  <div class="col-xs-4 col-sm-3 col-md-2"><a href="#"><i class="fa fa-graduation-cap fa-5x" style="background-color: #6fbf4e;"></i><br> <center>EDUCATION</a></div>
  <div class="col-xs-4 col-sm-3 col-md-2"><a href="#"><i class="fa fa-wrench fa-5x" style="background-color: #556266;"></i><br> <center>SERVICES</a></div>
  <div class="col-xs-4 col-sm-3 col-md-2"><a href="#"><i class="fa fa-calendar fa-5x" style="background-color: #eb686e;"></i><br> <center>EVENTS</a></div>
  <div class="col-xs-4 col-sm-3 col-md-2"><a href="#"><i class="fa fa-female fa-5x" style="background-color: #4a8c9c;"></i><br><center>FASHION</a></div>
  <div class="col-xs-4 col-sm-3 col-md-2"><a href="#"><i class="fa fa-paw fa-5x" style="background-color: #1693eb;"></i><br> <center>ANIMALS & PETS</a></div>
  <div class="col-xs-4 col-sm-3 col-md-2"><a href="#"><i class="fa fa-plus-circle fa-5x" style="background-color: #fc011f;"></i><br> <center>MORE</a></div>
  </div>
  
</div>
    
    <div><a href="#"><img class="featured" src="images/Featured-Ad.jpg" ></a></div>

拜托，我需要帮助，我已经尝试实现这一目标太久了，但我无处可去。谢谢

Answer 1

不要在类别之间添加行，只需一行，然后在该行内添加列。因此，首先添加您的特色部分，然后您的类别应该就位。像这样:

这是一个带有一些随机 CSS 和以下标记的 fiddle Fiddle Demo

<div class="container">
  <div class="row">
    <div class="col-xs-8 col-md-6 featured-section">
      <a class="featured" href="#"></a>
    </div>
    <div class="col-xs-4 col-md-2 category"><a href="#"></a></div>
    <div class="col-xs-4 col-md-2 category"><a href="#"></a></div>
    <div class="col-xs-4 col-md-2 category"><a href="#"></a></div>
    <div class="col-xs-4 col-md-2 category"><a href="#"></a></div>
    <div class="col-xs-4 col-md-2 category"><a href="#"></a></div>
    <div class="col-xs-4 col-md-2 category"><a href="#"></a></div>
    <div class="col-xs-4 col-md-2 category"><a href="#"></a></div>
    <div class="col-xs-4 col-md-2 category"><a href="#"></a></div>
    <div class="col-xs-4 col-md-2 category"><a href="#"></a></div>
    <div class="col-xs-4 col-md-2 category"><a href="#"></a></div>
    <div class="col-xs-4 col-md-2 category"><a href="#"></a></div>
    <div class="col-xs-4 col-md-2 category"><a href="#"></a></div>
    <div class="col-xs-4 col-md-2 category"><a href="#"></a></div>
    <div class="col-xs-4 col-md-2 category"><a href="#"></a></div>
    <div class="col-xs-4 col-md-2 category"><a href="#"></a></div>
  </div>
</div>