使用Bootstrap 4

Question

我在网站上以一行6列的形式显示图像，并且正在使用bootstrap 4潜水柱，如果我以移动方式查看该网站，则如果屏幕尺寸（宽度）减小，则我希望以4或每行3列。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container shadow">
   <div class="row text-center">

    <div class="col-sm-2">
        <a href="category_details.php?id=Advertising Agencies">
            <img src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_400x400.jpeg" height="70" width="70">
            <p class="text-para">image1</p>
        </a>
    </div>

    <div class="col-sm-2">
      <a href="category_details.php?id=Advocate">
      <img src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_400x400.jpeg" height="70" width="70">
      <p class="text-para">image2</p>
    </a>
    </div>

    <div class="col-sm-2">
      <a href="category_details.php?id=Agriculture">
      <img src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_400x400.jpeg" height="70" width="70">
      <p class="text-para">image3</p>
    </a>
    </div>
    <div class="col-sm-2">
      <a href="category_details.php?id=Architects">
      <img src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_400x400.jpeg" height="70" width="70">
      <p class="text-para">image4</p>
    </a>
    </div>
    <div class="col-sm-2">
      <a href="category_details.php?id=Astrologers">
      <img src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_400x400.jpeg" height="70" width="70">
      <p class="text-para">image5</p>
    </a>
    </div>

    <div class="col-sm-2">
      <a href="category_details.php?id=Automobiles">
      <img src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_400x400.jpeg" height="70" width="70">
      <p class="text-para">image6</p>
    </a>
    </div>

  </div>

在这里，如果屏幕宽度减小，我希望每行显示4或3张图像，但在移动视图中每行显示1张图像，请告知任何人，请以正确的方式建议我。

Answer 1

对于小屏幕您使用

<div class="col-4 col-sm-2">

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container shadow">
   <div class="row text-center">

    <div class="col-4 col-sm-2 col-md-2">
        <a href="category_details.php?id=Advertising Agencies">
            <img src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_400x400.jpeg" height="70" width="70">
            <p class="text-para">image1</p>
        </a>
    </div>

    <div class="col-4 col-sm-2 col-md-2">
      <a href="category_details.php?id=Advocate">
      <img src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_400x400.jpeg" height="70" width="70">
      <p class="text-para">image2</p>
    </a>
    </div>

    <div class="col-4 col-sm-2 col-md-2">
      <a href="category_details.php?id=Agriculture">
      <img src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_400x400.jpeg" height="70" width="70">
      <p class="text-para">image3</p>
    </a>
    </div>
    <div class="col-4 col-sm-2 col-md-2">
      <a href="category_details.php?id=Architects">
      <img src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_400x400.jpeg" height="70" width="70">
      <p class="text-para">image4</p>
    </a>
    </div>
    <div class="col-4 col-sm-2 col-md-2">
      <a href="category_details.php?id=Astrologers">
      <img src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_400x400.jpeg" height="70" width="70">
      <p class="text-para">image5</p>
    </a>
    </div>

    <div class="col-4 col-sm-2 col-md-2">
      <a href="category_details.php?id=Automobiles">
      <img src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_400x400.jpeg" height="70" width="70">
      <p class="text-para">image6</p>
    </a>
    </div>

  </div>