Question

我正在尝试使用引导程序像 this one from WIX一样重新创建卡。我有2个问题：

仅当全屏显示时，卡片才会接触到接触条，当我减小尺寸时，卡片会像this一样开始漂浮。（编辑：解决了这个问题）
我希望在屏幕变小时，卡片变得垂直（照片下方的文字）。（编辑：解决了这个问题）

更新：我的响应能力仍然存在问题：当屏幕变小时，我的文字无法很好地显示，并且我的头像在顶部的like this on in Ipad和like this on a phone上被切成两半。

这是我的html和css的一部分的样子：

    .grid-container{
    display: grid;
    grid-template-rows: 580px 75px 405px;
    width: 100vw;
}
    .grid-item-contact{
    background-color: #efefef;
    display: grid;
    grid-template-columns: 25% 50% 25%;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- main container -->
    <div class = "grid-container">
    <!-- card with photo -->
    <div class="grid-item-card">
        <div class="card mb-3 mx-auto border-0" style="max-width: 50vw; margin-top: 10vh; margin-bottom: 0px; border-radius:5px 5px 0px 0px;">
            <div class="row no-gutters">
                <div class="col">
                    <img src="cat.jpg" class="card-img" alt="...">
                </div>
                <div class="col">
                    <div class="card-body">
                        <h5 class="card-title">Quinten KJ</h5>
                        <h6 class="card-text">Master student financial engineering</h6>
                        <p class="card-text">This is text</p>
                        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--contact bar -->
    <div class="grid-item-contact">
        <div class = "grid-item-contact-1"></div>
        <div class = "grid-item-contact-2" style="background-color: #636769; text-align: center; border-radius:0px 0px 5px 5px;">
            <a href="###"><img src="linkedin-6-32.png" style="margin-top: 20px;"></a>
            <a href="###"><img src="facebook-3-32.png" style="margin-top: 20px; margin-left: 20px;"></a>
            <a href="###"><img src="mail-32.png" style="margin-top: 20px; margin-left: 20px;"></a>
        </div>
        <div class = "grid-item-contact-3"></div>
    </div>

Answer 1

请尝试这个。稍后，我将为所有内容添加说明。

我使用col-md-6代替col进行中小型设备对齐。 order属性用于更改卡片文本和卡片图像的order。一些媒体查询（640像素和480像素）用于对齐正确的grid-container，还为小型设备向padding添加一些grid-item-hello。

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

/*--body--*/
body {
    overflow-x: hidden;
    font-family: 'Open Sans', sans-serif;
    background-color: #efefef;
    background-repeat:no-repeat;
}

/*--navbar--*/
.navbar{
    text-transform: uppercase;
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: .1rem;
    background: rgba(0, 0, 0, .6)!important;
}

.navbar-nav li {
    padding-right: .7rem;
}

.navbar-dark .navbar-nav .nav-link {
    color: white;
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: #bfbfbf;
}


/*-- slider --*/

.carousel-item {
  height: 100vh;
  width: 100vw;
  min-height: 350px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.carousel-caption{
    position: absolute;
    top: 68%;
}

.carousel-caption h2{
    font-size: 2rem;
    letter-spacing: .1rem;
    text-shadow: .1rem .1rem .5rem black;
    padding-bottom: 1rem;

}

.carousel-caption h5{
    font-size: 1.5rem;
    letter-spacing: .1rem;
    text-shadow: .1rem .1rem .3rem black;
    padding-bottom: 1.3rem;

}

.btn-lg{
    border-width: medium;
    font-size: 1.1rem;
}

/*--about--*/

.grid-container{
    display: grid;
    grid-template-rows: 520px 60px 310px;
    width: 100vw;
}

.grid-item-card{
    align-self: end;
}

.grid-item-contact{
    background-color: #efefef;
    display: grid;
    /*--grid-template-columns: 490px 940px 490px;--*/
    grid-template-columns: 15% 70% 25%;
}

.grid-item-hello{
    background-color: #efefef;
    text-align: center;
    color: #636769;
}

.helloTitle{
    margin-top: 90px;
    margin-bottom: 20px;
}

.helloText{
    margin-bottom: 10px;
}

@media only screen and (max-width: 640px) {
  .grid-item-hello{
    padding:0 20px;
  }
  .grid-container{
    grid-template-rows: 680px 60px 300px;
  }
}

@media only screen and (max-width: 480px) {
  .grid-container{
    grid-template-rows: 580px 60px 400px;
  }

}

<!-- Based on Wix template: https://nl.wix.com/website-template/view/html/1893?siteId=31c9cc64-4739-437a-bf99-8a87fae88840&metaSiteId=7df46866-884d-4ed2-a9ea-b6f80df2ebaf&originUrl=https%3A%2F%2Fnl.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fportfolio-cv -->

<!doctype html>
<html lang="en">

<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.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <link href="styles.css" rel="stylesheet">

  <title>About</title>
</head>

<body style="background-image: url(https://images.unsplash.com/photo-1449157291145-7efd050a4d0e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80);">
  <!-- navbar -->
  <nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
    <div class="container">
      <a class="navbar-brand" href="index.html">Quinten KJ</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="index.html">Home</a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="about.html">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="cv.html">CV</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="contact.html" style="border-style: solid; border-width: medium; border-radius: 5px; margin-top: -4px;">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- main container -->
  <div class="grid-container">
    <!-- card with photo -->
    <div class="grid-item-card">
      <div class="card mx-auto border-0" style="max-width: 70vw; margin-top: 10vh; margin-bottom: 0px; border-radius:5px 5px 0px 0px;">
        <div class="row">
          <div class="col-lg-6 order-md-0 order-1 px-md-0">
            <img src="https://images.unsplash.com/photo-1537815749002-de6a533c64db?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1445&q=80" class="card-img" alt="...">
          </div>
          <div class="col-lg-6 order-md-1 order-0 px-md-0">
            <div class="card-body">
              <h5 class="card-title">Quinten KJ</h5>
              <h6 class="card-text">Master student financial engineering</h6>
              <p class="card-text">This is text</p>
              <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--contact bar -->
    <div class="grid-item-contact">
      <div class="grid-item-contact-1"></div>
      <div class="grid-item-contact-2" style="background-color: #636769; text-align: center; border-radius:0px 0px 5px 5px;">
        <a href="###"><img src="https://image.flaticon.com/icons/svg/2111/2111723.svg" style="margin-top: 20px; height:36px;; width: 36px;"></a>
        <a href="###"><img src="https://image.flaticon.com/icons/svg/1051/1051360.svg" style="margin-top: 20px; margin-left: 20px; height:36px;; width: 36px;"></a>
        <a href="###"><img src="https://image.flaticon.com/icons/svg/1946/1946426.svg" style="margin-top: 20px; margin-left: 20px; height:36px;; width: 36px;"></a>
      </div>
      <div class="grid-item-contact-3"></div>
    </div>

    <!--Hello-->
    <div class="grid-item-hello">
      <h3 class="helloTitle">Hello, I'm Quinten!</h3>
      <p class="helloText">"I'm a greater believer in luck, and I find the harder I work the more I have of it" </p>
      <p class="helloText">- Thomas Jefferson -</p>
      <p class="helloText"></p>
      <p class="helloText"></p>
      <p class="helloText">I'm a master student financial engineering at the University of Antwerp.</p>
      <p class="helloText"></p>
      <p class="helloText"></p>
    </div>

    <!-- end main container-->
  </div>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>

</html>

引导程序：响应式卡

1 个答案: