类别部分使用引导程序

Question

我发现很难实现一个L形的类别部分与特色广告放置在特色广告旁边。我使用引导是因为响应性，它是我知道的唯一选项。

请继承人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 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>