Question

我是一名新手程序员，尝试学习bootstrap 4缩放。我必须把这些盒子适当缩小。我已经工作了12个小时。我尝试过div容器Ul Li，但没有运气。

如果任何人都可以指出我要去哪里，我将不胜感激。

我还在最底部添加了示例，以显示在不同屏幕尺寸下页面的外观。

再次感谢！

Rob

/*
Colors: 
#4aaaa5; <--teal
#ffffff; <--white
#777777; <--gray

*/

html,
body {
    height: 100%;
    width: 100%;
    font-family: 'Poppins', 'sans-serif';
    color: #222;
}

.robTitle {

    margin-left: 30px;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #4aaaa5;
    color: #ffffff;
    font-family: 'Georgia', Times, 'Times New Roman', serif;
    width: 300px
}



.robImage {
    width: 35%;
    height: auto;

}

.navStyle {
    background-color: white;
    border-bottom: 2px solid #cccccc;

}

.nav-item {
    margin-right: 30px;
}

.nav-link {
    color: #777777;
}

.main-background {
    background-image: url(../images/swirl_pattern.png);
    background-repeat: repeat;
    padding-top: 30px;
}

.contentBack {
    background-color: #ffffff;
    height: 500px;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 70px;
    padding-top: 20px;
    border: 2px solid #dddddd;
}
.boxback {
    justify-content: center;
}

.contentBackPort {
    
    background-color: #ffffff;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 150px;
    padding-top: 20px;
    border: 2px solid #dddddd;
    justify-content: center;
    width: 100%;
}

.contentText {
    word-spacing: .25em;
    line-height: 1.5em;
    padding-top: 8px;
    color: #777777;
    font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
    ;
}


}

.titleLine {
    border: 1px solid #777777;
}

.contentHeading {
    color: #4aaaa5;
    font-family: 'Georgia', Times, 'Times New Roman', serif;

}


.wordGuessBox {
    height: 200px;
    width: 250px;
    background-image: url(../images/hangman.jpg);
    background-size: 200px;
    padding: 100px 0 0 0px;
    margin: 30px -60px;
    text-align: center;
}


.rpgBox {
    height: 200px;
    width: 250px;
    background-image: url(../images/rpg.jpg);
    background-size: 200px;
    padding: 100px 0 0 0;
    margin: 30px 60px ;
    text-align: center;

}

.infoBox {
    height: 200px;
    width: 250px;
    background-image: url(../images/rutgers.jpg);
    background-size: 200px;
    padding: 100px 0 0 0;
    margin: 0 60px 30px;
    text-align: center;
    left: 30px;
   
}


.triviaBox {
    height: 200px;
    width: 250px;
    background-image: url(../images/rpg.jpg);
    background-size: 200px;
    padding: 100px 0 0 0;
    margin: 0 -60px;
    text-align: center;
    right: 30px;
    

}

.rpsBox {
        height: 200px;
        width: 250px;
        background-image: url(../images/rpg.jpg);
        background-size: 200px;
        padding: 100px 0 0 0;
        margin: 0 -60px;
        text-align: center;
        right: 30px;
             
}

.boxText {
    color: white;
    background-color: #4aaaa5;
    padding: 10px;
    margin-top: 40px;
}



ul {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 35% 35%;
    background-color: white;
    list-style: none;
    margin: 0 0 0 40px;
}
    

footer {

    background-color: #666666;
    color: #d5d5d5;
    padding-top: 40px;
    width: 100%;
    font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
    ;
}

.footerLine {
    background-color: #4aaaa5;
    height: 70px;
    width: 100%;

    @media (max-width: 766px) {
    
    .robTitle {
        margin-left: 0;
        margin-right: 0;
        padding-top: 20px;
        padding-bottom: 20px;
        width: 100%;

    }

    .navbarLinks {
        justify-content: center;
        width: 100%;
    }

    .contentBack {
        background-color: #ffffff;
        height: 100%;
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
        margin-top: 110px;
    }

    .robImage {

        width: 100%;
        height: auto;
        align-content: center;
    }

    .contentText {
        word-spacing: .25em;
        line-height: 1.5em;
    }
    .contentBackPort {
    
        background-color: #ffffff;
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 150px;
        padding-top: 20px;
        border: 2px solid #dddddd;
        justify-content: center;
    }

/*
Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
*/

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="assets/css/style.css">
    <title>Rob Connolly's Portfolio</title>
</head>

<body class="main-background">


    <!-- Navigation-->

    <div class="row navStyle fixed-top">
        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
            <h2 class="robTitle text-center">Rob Connolly</h2>
        </div>

        <!--End of the column div-->

        <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 col-xl-8">
            <nav class="navbar navbar-expand-lg">

                <div class="navbar navbar-expand ml-auto navbarLinks">
                    <a class="nav-item nav-link" href="#">Home</a>
                    <a class="nav-item nav-link" href="#">Portfolio</a>
                    <a class="nav-item nav-link" href="#">Contact</a>

                </div>
                <!--End of div for navbar class-->

        </div>
        <!--End of column div-->

    </div>
    <!--End of row div-->

    <!-- Portfolio-->



    <div class="container-fluid">
        <div class="row text-center">
            <div class="contentBackPort col-xs-12 col-sm-12 col-md-8 col-lg-8 col-xl-8">
                <ul>
                    <li>
                        <div class="wordGuessBox">
                            <p class="boxText"> Word Guess
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="rpgBox">
                            <p class="boxText">RPG Game</p>
                        </div>
                    </li>

                    <div class="triviaBox">
                        <p class="boxText">Trivia Game
                        </p>
                    </div>
                    </li>
                    <li>
                        <div class="infoBox">
                            <p class="boxText">Info Widget</p>
                        </div>
                    </li>
                    <li>
                        <div class="rpsBox">
                            <p class="boxText">Rock Paper Scissors</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>



                <!--                <div class="box1 float-left">
                <p>box 1</p>
            </div>
            <div class="box2 float-left">
                <p>box 2</p>
            </div>
            <div class="row float-left">
            </div>
    
            <div class="box3 float-left">
                <p>box 3</p>
            </div>
            <div class="box4 float-left">
                <p>box 4</p>
            </div>

            <div class="row"></div>
                <div class="box5 float-left">
                    <p>box 5</p>
                </div>
            </div>
        </div>
    </div>
-->









                <!-- 

    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-6">
                <div class="contentBackPort">
                    
                    <ul class="boxback">
                        
                        <li>
                        
                            <div class="wordGuessBox">
                                <p class="boxText"> Word Guess
                                </p>
                            </div>
                        </li>

                        <li> 
                                <div class="rpgBox">
                                        <p class="boxText">RPG Game</p>
                                    </div>
                        </li>

                        <li>
                                <div class="triviaBox">
                                    <p class="boxText">Trivia Game
                                    </p>
                                </div>
                            </li>
                            <li> 
                                    <div class="infoBox">
                                            <p class="boxText">Info Widget</p>
                                        </div>
                            </li>
                            <li> 
                                    <div class="rpsBox">
                                            <p class="boxText">Rock Paper Scissors</p>
                                        </div>
                            </li>

                        

                    </ul>



                   

                    


                </div>

            </div>
        </div>
    </div>
-->


                <!-- Footer -->

                <hr class="footerLine fixed-bottom">
                <footer class="fixed-bottom">

                    <div class="container-fluid">

                        <div class="row text-center">
                            <div class="col-12">

                                <h5>&copy; Rob Connolly</h5>
                            </div>
                            <!--closes col12 -->
                        </div>
                        <!--closes row-->
                    </div>
                    <!--closes contaner-->
                </footer>
                <!--closes footer-->


</body>

</html>

以下是页面在不同屏幕尺寸下的显示方式：

980 px

Answer 1

这是代码。希望对您有帮助。我更改为整个代码。如果有任何更改，请通知我。

html,
body {
  height: 100%;
  width: 100%;
  font-family: 'Poppins', 'sans-serif';
  color: #222;
  background: #d4d4d4;
}

.portfolio {
  background: #d4d4d4;
}

.robTitle {
  padding: 1.5rem 1rem;
  background-color: #4aaaa5;
  color: #ffffff;
  font-family: 'Georgia', Times, 'Times New Roman', serif;
  width: 300px;
  margin-bottom: 0;
}

.navbar {
  padding: 0;
  justify-content: flex-end !important;
}

.robImage {
  width: 35%;
  height: auto;

}

.contentBackPort h3 {
  text-align: left;
  margin-bottom: 20px;
}

.navStyle {
  background-color: white;
  border-bottom: 2px solid #cccccc;
  justify-content: space-between;
  align-items: center;

}

.nav-link {
  color: #777777;
}

.main-background {
  background-image: url(../images/swirl_pattern.png);
  background-repeat: repeat;
}

.contentBack {
  background-color: #ffffff;
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 70px;
  padding-top: 20px;
  border: 2px solid #dddddd;
}

.boxback {
  justify-content: center;
}

.contentBackPort {
  background-color: #ffffff;
  padding-top: 20px;
  border: 2px solid #dddddd;
  justify-content: center;
  width: 100%;
  margin-top: 90px;
}

.contentText {
  word-spacing: .25em;
  line-height: 1.5em;
  padding-top: 8px;
  color: #777777;
  font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
}


.titleLine {
  border: 1px solid #777777;
}

.contentHeading {
  color: #4aaaa5;
  font-family: 'Georgia', Times, 'Times New Roman', serif;
}

.wordGuessBox {
  height: 200px;
  background-image: url('https://dummyimage.com/300x250/000/fff.png');
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
}


.rpgBox {
  height: 200px;
  background-image: url('https://dummyimage.com/300x250/ff00ff/fff.png');
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
}

.infoBox {
  height: 200px;
  background-image: url('https://dummyimage.com/300x250/ff00ff/fff.png');
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
}


.triviaBox {
  height: 200px;
  background-image: url('https://dummyimage.com/300x250/ff00ff/fff.png');
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
}

.rpsBox {
  height: 200px;
  background-image: url('https://dummyimage.com/300x250/ff00ff/fff.png');
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
}

.boxText {
  color: white;
  background-color: #4aaaa5;
  padding: 10px;
  position: absolute;
  width: 100%;
  bottom: 0px;
}



ul {
  margin: 0 auto;
  background-color: white;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 20px;
  padding-left: 0;
}


footer {
  background-color: #666666;
  color: #d5d5d5;
  padding-top: 40px;
  width: 100%;
  font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
}

.footerLine {
  background-color: #4aaaa5;
  height: 70px;
  width: 100%;

}

@media screen and (max-width:767px) {
  .robTitle {
    width: auto;
    font-size: 20px;
    margin-left: 0;
  }

  
}
@media screen and (max-width:567px) {
  .navbar {
    padding: 0;
    justify-content: center !important;
  }
  .contentBackPort{
    margin-top: 145px;
  }
}

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

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <title>Rob Connolly's Portfolio</title>
  </head>

  <body>
    <div class="main-background">
      <!-- Navigation-->
      <div class="row navStyle fixed-top">
        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 col-xl-4">
          <h2 class="robTitle text-center">Rob Connolly</h2>
        </div>
        <!--End of the column div-->

        <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 col-xl-8">
          <div class="navbar navbar-expand ml-auto navbarLinks">
            <a class="nav-item nav-link" href="#">Home</a>
            <a class="nav-item nav-link" href="#">Portfolio</a>
            <a class="nav-item nav-link" href="#">Contact</a>
          </div>
          <!--End of div for navbar class-->
        </div>
        <!--End of column div-->

      </div>
      <!--End of row div-->

      <!-- Portfolio-->
      <div class="portfolio">
        <div class="container-fluid">
          <div class="text-center">
            <div class="contentBackPort col-xs-12 col-sm-12 col-md-12 col-lg-8 col-xl-8">
              <h3>Porfolio</h3>
              <ul>
                <li>
                  <div class="wordGuessBox">
                    <p class="boxText"> Word Guess</p>
                  </div>
                </li>
                <li>
                  <div class="rpgBox">
                    <p class="boxText">RPG Game</p>
                  </div>
                </li>
                <li>
                  <div class="triviaBox">
                    <p class="boxText">Trivia Game</p>
                  </div>
                </li>
                <li>
                  <div class="infoBox">
                    <p class="boxText">Info Widget</p>
                  </div>
                </li>
                <li>
                  <div class="rpsBox">
                    <p class="boxText">Rock Paper Scissors</p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <!-- Footer -->
      <hr class="footerLine">
      <footer class="fixed-bottom">
        <div class="container-fluid">
          <div class="row text-center">
            <div class="col-12">
              <h5>&copy; Rob Connolly</h5>
            </div>
            <!--closes col12 -->
          </div>
          <!--closes row-->
        </div>
      </footer>
      <!--closes footer-->
    </div>
  </body>

</html>

Answer 2

好的，这就是我所做的。

感谢@Revti让我走上正轨！

@media screen and (max-width:767px) {
.wordGuessBox {
    height: 300px;
    background-image: url('https://dummyimage.com/300x250/000/fff.png');
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 30px;
  }
  
  
  .rpgBox {
    height: 300px;
    background-image: url('https://dummyimage.com/300x250/ff00ff/fff.png');
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 30px;
  }
  
  .infoBox {
    height: 300px;
    background-image: url('https://dummyimage.com/300x250/ff00ff/fff.png');
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 30px;
  }
  
  
  .triviaBox {
    height: 300px;
    background-image: url('https://dummyimage.com/300x250/ff00ff/fff.png');
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 30px;
  }
  
  .rpsBox {
    height: 300px;
    background-image: url('https://dummyimage.com/300x250/ff00ff/fff.png');
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 30px;
  }
  
  .boxText {
    color: white;
    background-color: #4aaaa5;
    padding: 10px;
    position: absolute;
    width: 100%;
    bottom: 0px;
  }
  ul {
    margin: 0 auto;
    background-color: white;
    list-style: none;
    display: list-item;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 20px;
    padding-left: 0;
  }
}

如何使布局正确缩放？

2 个答案: