Question

我正在尝试桌面中的这些布局5列，平板电脑中的3列和移动设备中的1列我正在寻找我应该做的解决方案但都是0结果。这些可能吗？任何人都可以查看下面的代码吗？

.col-half-offset {
  margin-left: 4.166666667%
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<div class="container">
  <div class="row">
    <!-- List Starts -->
    <ul class="list-unstyled list-style-2 row-fluid">

      <!-- List Col #1 Starts -->
      <div class="col-xs-2">
        <a href="#" title="">
          <img src="images1.png" class="img-responsive " />
        </a>
        <h6 class="text-light1 text-center">Column 1</h6>
      </div>
      <!-- List Col #1 Ends -->

      <!-- List Col #2 Starts -->
      <div class="col-xs-2 col-half-offset">
        <a href="#" title="">
          <img src="images2.png” class=" img-responsive” />
        </a>
        <h6 class="text-light1 text-center">Column 2</h6>
      </div>
      <!-- List Col #2 Ends -->

      <!-- List Col #3 Starts -->
      <div class="col-xs-2 col-half-offset">
        <a href="#" title="">
          <img src="images3.png" class="img-responsive" />
        </a>
        <h6 class="text-light1 text-center">Column 3</h6>
      </div>
      <!-- List Col #3 Ends -->

      <!-- List Col #4 Starts -->
      <div class="col-xs-2 col-half-offset">
        <a href="#" title="">
          <img src="images4.png" class="img-responsive" />
        </a>
        <h6 class="text-light1 text-center">Column 4</h6>
      </div>
      <!-- List Col #4 Ends -->

      <!-- List Col #5 Starts -->
      <div class="col-xs-2 col-half-offset">
        <a href="#" title="">
          <img src="images5.png" class="img-responsive" />
        </a>
        <h6 class="text-light1 text-center">Column 5</h6>
      </div>
      <!-- List Col #5 Ends -->

    </ul>
  </div>
</div>

任何人都可以提供解决方案吗？

Answer 1

你需要使用Bootstrap网格系统，有不同的尺寸

xs (for phones - screens less than 768px wide)
sm (for tablets - screens equal to or greater than 768px wide)
md (for small laptops - screens equal to or greater than 992px wide)
lg (for laptops and desktops - screens equal to or greater than 1200px wide)

you can  do something like this

<div class="container">
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"></div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"></div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"></div>
</div>
</div>

this above example will make sure your content is divided into 3 columns in all screen sizes.

有关引导网格系统的更多信息：https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

更新：在桌面上有5列，平板电脑有3列，移动设备有1列：

<!-- for desktop -->

<div class="row hidden-xs hidden-sm hidden-md">
<div class="col-lg-2 col-lg-offset-1"></div>
<div class="col-lg-2"></div>
<div class="col-lg-2"></div>
<div class="col-lg-2"></div>
<div class="col-lg-2"></div>
</div>


<!-- for tablet -->
<div class="row hidden-lg hidden-md hidden-xs">
<div class="col-sm-4></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div>

<!-- for mobile-->
<div class="row hidden-lg hidden-md hidden-sm">
<div class="col-xs-12></div>
</div>
<!-- the "hidden-*" will hide the entire row element in the specified screen size-->

5个桌面列，3个平板电脑，1个移动设备使用引导程序

1 个答案: