类别部分使用 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

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

这是一个 fiddle，带有一些随机 css 和以下标记 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>

类别部分使用 Bootstrap

Category Section Using Bootstrap

html

css

wordpress

font-awesome

bootstrap-modal