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

1 个答案: