如何自定义卡定位Bootstrap

时间：2019-06-23 20:46:45

标签： javascript html css bootstrap-4

我需要一些帮助，因为我找不到自定义引导卡在屏幕上显示方式的方法。 例如，当屏幕宽度为860时，我希望它仅加载2张卡片而不是3张卡片；而当屏幕宽度为600时，它只能加载2张卡片，但更小，因此它们可以容纳在同一行中！有什么办法可以达到这个结果？

/* Title */
#cc{
  position: relative;
  text-align: center;
  margin-top: 180px;
}

#Slogan{
  text-transform: uppercase;
  font-weight: 400;
  font-size: 70px;
}

.text-gray-soft{
  margin-top: 6px;
  color: rgba(0, 0, 0, 0.5);
}

#btn{
  margin-top: 20px;
}

/* Newest TAB */
@media (min-width: 500px) {
  #nn{
    position: relative;
    text-align: left;
    margin-top: 130px;
    margin-left: 50px;
  }
  .line1{
    margin-right: 50px;
  }
  .card{
    position: relative;
    margin-bottom: 20px;
    text-align: center;
  }
}

@media (min-width: 992px) {
  #nn{
    position: relative;
    text-align: left;
    margin-top: 130px;
    margin-left: 200px;
  }
  .line1{
    margin-right: 200px;
  }
  .card{
    margin-bottom: 20px;
    margin-left: 30px;
  }
}

@media (min-width: 1300px) {
  #nn{
    position: relative;
    text-align: left;
    margin-top: 130px;
    margin-left: 300px;
  }
  .line1{
    margin-right: 300px;
  }
  .card{
    margin-bottom: 20px;
    margin-left: 30px;
  }
}

@media (min-width: 1800px) {
  #nn{
    position: relative;
    text-align: left;
    margin-top: 130px;
    margin-left: 400px;
  }
  .line1{
    margin-right: 400px;
  }
  .card{
    margin-bottom: 20px;
    margin-left: 30px;
  }
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <!-- CSS -->
    <link rel="stylesheet" href="static/css/index.css">

    <title>Hello, world!</title>
  </head>
  <body>
    <div class="container-fluid">
      <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <a class="navbar-brand" href="#">BoostTemplates</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
          <div class="navbar-nav">
            <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
            <a class="nav-item nav-link" href="#">Shop</a>
            <a class="nav-item nav-link" href="#">Contact</a>
          </div>
        </div>
      </nav>
    </div>
    <div class="cointainer" id="cc">
      <h1 class="display-1 text-bold" id="Slogan">Make <br>anything</h1>
      <h5 class="text-gray-soft">All the themes you need in one place.</h5>
      <button type="button" class="btn btn-dark btn-lg" id="btn" >SHOP</button>
    </div>
    <div class="cointainer" id="nn">
      <h4 class="display-5 NewestT">Newest</h4>
      <h6 class="text-gray-soft">Recently added to the shop</h6>
      <hr class="line1">
    </div>
    <div class="container" id="containerpart">
      <div class="row">
        <div class="col-sm">
          <div class="card" style="width: 18rem;">
            <img src="static/images/BS_Dashboard-400x300.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Dashboard</h5>
              <p class="card-text">Clean and simple dashboard and admin interface.</p>
              <a href="#" class="btn btn-primary btn-dark">Go somewhere</a>
            </div>
          </div>
        </div>
        <div class="col-sm">
          <div class="card" style="width: 18rem;">
            <img src="static/images/BS_Dashboard-400x300.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Dashboard</h5>
              <p class="card-text">Clean and simple dashboard and admin interface.</p>
              <a href="#" class="btn btn-primary btn-dark">Go somewhere</a>
            </div>
          </div>
        </div>
        <div class="col-sm">
          <div class="card" style="width: 18rem;">
            <img src="static/images/BS_Dashboard-400x300.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Dashboard</h5>
              <p class="card-text">Clean and simple dashboard and admin interface.</p>
              <a href="#" class="btn btn-primary btn-dark">Go somewhere</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <!-- JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</html>

1 个答案:

答案 0 :(得分：1)

这个想法是，您定义一个row，并在其中定义col。

想象一下将每一行分为12个部分。然后，您可以在每个col上的每个屏幕尺寸类别上分配要覆盖的部分。

因此，如果您希望在小屏幕上每行拥有2张卡片，而在大屏幕上每行拥有3张卡片，则可以设置col-6 col-md-4，这意味着在超小屏幕（小于576像素）上，应覆盖12之6（1 / 2），而在小屏幕或更大（大于或等于576像素）的屏幕上，请覆盖12之4（1/3）。

示例代码：

<div class="container">
    <div class="row">
        <div class="col-6 col-sm-4">
            Card 1
        </div>
        <div class="col-6 col-sm-4">
            Card 2
        </div>
        <div class="col-6 col-sm-4">
            Card 3
        </div>
        <div class="col-6 col-sm-4">
            Card 4
        </div>
        <div class="col-6 col-sm-4">
            Card 5
        </div>
        <div class="col-6 col-sm-4">
            Card 6
        </div>
    </div>
</div>

根据您的代码

/* Title */
#cc{
  position: relative;
  text-align: center;
  margin-top: 180px;
}

#Slogan{
  text-transform: uppercase;
  font-weight: 400;
  font-size: 70px;
}

.text-gray-soft{
  margin-top: 6px;
  color: rgba(0, 0, 0, 0.5);
}

#btn{
  margin-top: 20px;
}

/* Newest TAB */
@media (min-width: 500px) {
  #nn{
    position: relative;
    text-align: left;
    margin-top: 130px;
    margin-left: 50px;
  }
  .line1{
    margin-right: 50px;
  }
  .card{
    position: relative;
    margin-bottom: 20px;
    text-align: center;
  }
}

@media (min-width: 992px) {
  #nn{
    position: relative;
    text-align: left;
    margin-top: 130px;
    margin-left: 200px;
  }
  .line1{
    margin-right: 200px;
  }
  .card{
    margin-bottom: 20px;
    margin-left: 30px;
  }
}

@media (min-width: 1300px) {
  #nn{
    position: relative;
    text-align: left;
    margin-top: 130px;
    margin-left: 300px;
  }
  .line1{
    margin-right: 300px;
  }
  .card{
    margin-bottom: 20px;
    margin-left: 30px;
  }
}

@media (min-width: 1800px) {
  #nn{
    position: relative;
    text-align: left;
    margin-top: 130px;
    margin-left: 400px;
  }
  .line1{
    margin-right: 400px;
  }
  .card{
    margin-bottom: 20px;
    margin-left: 30px;
  }
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <!-- CSS -->
    <link rel="stylesheet" href="static/css/index.css">

    <title>Hello, world!</title>
  </head>
  <body>
    <div class="container-fluid">
      <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <a class="navbar-brand" href="#">BoostTemplates</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
          <div class="navbar-nav">
            <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
            <a class="nav-item nav-link" href="#">Shop</a>
            <a class="nav-item nav-link" href="#">Contact</a>
          </div>
        </div>
      </nav>
    </div>
    <div class="cointainer" id="cc">
      <h1 class="display-1 text-bold" id="Slogan">Make <br>anything</h1>
      <h5 class="text-gray-soft">All the themes you need in one place.</h5>
      <button type="button" class="btn btn-dark btn-lg" id="btn" >SHOP</button>
    </div>
    <div class="cointainer" id="nn">
      <h4 class="display-5 NewestT">Newest</h4>
      <h6 class="text-gray-soft">Recently added to the shop</h6>
      <hr class="line1">
    </div>
    <div class="container" id="containerpart">
      <div class="row">
        <div class="col-6 col-sm-4">
          <div class="card" style="width: 18rem;">
            <img src="static/images/BS_Dashboard-400x300.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Dashboard</h5>
              <p class="card-text">Clean and simple dashboard and admin interface.</p>
              <a href="#" class="btn btn-primary btn-dark">Go somewhere</a>
            </div>
          </div>
        </div>
        <div class="col-6 col-sm-4">
          <div class="card" style="width: 18rem;">
            <img src="static/images/BS_Dashboard-400x300.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Dashboard</h5>
              <p class="card-text">Clean and simple dashboard and admin interface.</p>
              <a href="#" class="btn btn-primary btn-dark">Go somewhere</a>
            </div>
          </div>
        </div>
        <div class="col-6 col-sm-4">
          <div class="card" style="width: 18rem;">
            <img src="static/images/BS_Dashboard-400x300.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Dashboard</h5>
              <p class="card-text">Clean and simple dashboard and admin interface.</p>
              <a href="#" class="btn btn-primary btn-dark">Go somewhere</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <!-- JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</html>

相关问题
最新问题