覆盖 CSS 的 Bootstrap 样式？答案

【问题标题】：Override Bootstrap styles for CSS?覆盖 CSS 的 Bootstrap 样式？
【发布时间】：2021-04-08 19:23:19
【问题描述】：

我的朋友告诉我有关引导程序来解决我之前的问题（仍未解决）以缩放图像以适应屏幕//我需要一个响应式布局。哦，我的 27 英寸显示器，网站看起来很干净，如下所示：

不过，在我决定放大之前：

所以基本上网站决定完全切断我实施的每张图片的边缘。现在我听说引导程序在这种情况下会很有用，但是当我实现它并通过教程安装它时 - 在每一步之后，它看起来像这样：

所以基本上，我的代码决定了。这是一件可怕的事情，因为当我将作业交给我的老师时，他将在一个小得多的屏幕上查看该网站，这意味着该网站将被放大，所有内容都将被切断或看起来非常难看。如何解决引导问题？我尝试将链接代码放在 style.css 和 index.css 文件之前的引导 css 文件中，但是错误继续发生。代码如下：

html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Jared's Workshop | Homepage</title>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="parallax.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="bootstrap.min.css">
    <link href="style.css" rel="stylesheet">
    <link rel="stylesheet" href="index.css">
  </head>
  <header>
    <div class="number2">
    </div>
    <div class="navbar">
      <div class="navlinks">
        <ul>
          <li><a href="index.html">H o m e</a></li>
          <li><a href="gaming.html">G a m i n g</a></li>
          <li><a href="office.html">O f f i c e</a></li>
          <li><a href="contacts.html">C o n t a c t s</a></li>
          <li><a href="checkout.html">C h e c k o u t</a></li>
      </div>
    </div>

  </header>
  <body>

    <div class="container">
      <div class="containimage">
        <div class="logo1">

          <img src="./assets/logos/logoreal2.png">

        </div>
      </div>

      <div class="parallax" data-parallax="scroll" data-z-index="1" data-image-src="./assets/background/back.jpg"></div>

      <div class="text-justify">
        <div class="abovepic">
          <img src="pc.png"/>
        </div>

        <div class="slide">
          <!-- Slideshow container -->
          <div class="slideshow-container">

            <!-- Full-width images with number and caption text -->
            <div class="mySlides fade">
              <div class="numbertext">1 / 3</div>
              <a href="gaming.html"/><img src="./assets/banners/easter.png">
              <div class="text"></div>
            </div>

            <div class="mySlides fade">
              <div class="numbertext">2 / 3</div>
              <a href='#geforce'/><img src="./assets/banners/easter.jpg">
              <div class="text"></div>
            </div>

            <div class="mySlides fade">
              <div class="numbertext">3 / 3</div>
              <a href="gaming.html"/><img src="./assets/banners/whiteout.png">
              <div class="text"></div>
            </div>

            <!-- Next and previous buttons -->
            <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
            <a class="next" onclick="plusSlides(1)">&#10095;</a>
          </div>
          <br>

          <!-- The dots/circles -->

          <div style="text-align:center">
            <span class="dot" onclick="currentSlide(1)"></span>
            <span class="dot" onclick="currentSlide(2)"></span>
            <span class="dot" onclick="currentSlide(3)"></span>
          </div>

  <!--
          <script>
          var slideIndex = 1;
          showSlides(slideIndex);

          function plusSlides(n) {
            showSlides(slideIndex += n);
          }

          function currentSlide(n) {
            showSlides(slideIndex = n);
          }

          function showSlides(n) {
            var i;
            var slides = document.getElementsByClassName("mySlides");
            var dots = document.getElementsByClassName("dot");
            if (n > slides.length) {slideIndex = 1}
            if (n < 1) {slideIndex = slides.length}
            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
            for (i = 0; i < dots.length; i++) {
                dots[i].className = dots[i].className.replace(" active", "");
            }
            slides[slideIndex-1].style.display = "block";
            dots[slideIndex-1].className += " active";
          }
          </script>
  -->

          <script>
          var slideIndex = 0;
          showSlides();

          function showSlides() {
            var i;
            var slides = document.getElementsByClassName("mySlides");
            var dots = document.getElementsByClassName("dot");
            for (i = 0; i < slides.length; i++) {
              slides[i].style.display = "none";
            }
            slideIndex++;
            if (slideIndex > slides.length) {slideIndex = 1}
            for (i = 0; i < dots.length; i++) {
              dots[i].className = dots[i].className.replace(" active", "");
            }
            slides[slideIndex-1].style.display = "block";
            dots[slideIndex-1].className += " active";
            setTimeout(showSlides, 4000); // Change image every 2 seconds
          }
          </script>


        </div>





        <div class="pie">

                      <div class="text2">
                        <h1>HOT BUILDS</h1>
                        <p>Recommended builds with hot prices from our <a href="#music.html" class="website" target="_blank"><b>gaming builds.</b></a></p>
                      </div>

                    <section id="tickets">
                      <div id="tickets container">

                        <div class="ticketsbottom">
                          <div class="ticketsitem" style="background-image: url(./assets/background/helios2.jpg)">
                            <div class="icon">
                              <img src="./assets/icons/bhov/helios.png"/>
                              <div class="iconinside">
                                <img src="./assets/icons/ahov/insidehelios.png"/>
                              </div>
                            </div>
                            <h2>HELIOS</h2>
                            <p><b style="font-size: 1.8rem">$3355</b><br>- Intel Core i7 10700K 3.8GHz<br>- 16GB Gigabyte Memory<br>- Gigabyte Z490 Motherboard<br>- WD 500GB SSD OS Drive<br>- ASUS RTX 3070 8GB Graphics<br>- eVGA 750W Power Supply</p>
                            <a href="#music" type="button" class="superbutton" >Add to cart</a>
                          </div>
                          <div class="ticketsitem" style="background-image: url(./assets/background/coal2.png)">
                            <div class="icon">
                              <img src="./assets/icons/bhov/hot1.png"/>
                              <div class="iconinside">
                                <img src="./assets/icons/ahov/insidecoal.png"/>
                              </div>
                            </div>
                            <h2>COAL</h2>
                            <p><b style="font-size: 1.8rem">$3360</b><br>- Intel Core i7 10700KF 3.8Ghz<br>- 16GB Gigabyte Memory<br>- Gigabyte Z490 Motherboard<br>- Samsung 500GB SSD OS Drive<br>- Gigabyte RTX 3070 8GB Graphics<br>- Gigabyte 750W Power Supply</p>
                            <a href="#music" type="button" class="superbutton" >Add to cart</a>
                          </div>
                          <div class="ticketsitem" style="background-image: url(./assets/background/remix2.png">
                            <div class="icon">
                              <img src="./assets/icons/bhov/remix.png"/>
                              <div class="iconinside">
                                <img src="./assets/icons/ahov/insideremix.png"/>
                              </div>
                            </div>

                            <h2>REMIX</h2>
                            <p><b style="font-size: 1.8rem">$6270</b><br>- Intel Core i9 10850K 3.6Ghz<br>- 32GB Corsair Memory<br>- Gigabyte Z490 Motherboard<br>- Samsung 2TB SSD OS Drive<br>- Gigabyte RTX 3090 24GB Graphics<br>- eVGA 1000W Power Supply</p>
                            <a href="#music" type="button" class="superbutton" >Add to cart</a>
                          </div>
                        </div>
                      </div>
                    </section>
        </div>
        <div class="between">

          <div id="geforce">
            <div class="glogo">
              <img src="./assets/icons/geforce 3.png"/>
            </div>
            <iframe width="900" height="506.25" src="https://www.youtube.com/embed/casgtX_HMTQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
          <!--<a href="https://www.youtube.com/watch?v=DuDX6wNfjqc" type="button" class="superbutton" target="_blank">SEE VIDEO</a> </div>--->


        <div class="img1">
          <div class="frames">
            <hr>
            <br>
            <br>
            <br>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/oQH1dP13O3s" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/5k7UPag-9x4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/T3lopR0XpOE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
          </div>
        </div>

        <p>
          All Rights Reserved. Copyright 1991-2020 PLE Computers Pty Ltd (ABN: 48 051 046 596). The PLE Computer Logo & Mouse Pointer in Circles are registered Trademarks of PLE Computers Pty Ltd. All other trademarks and copyrights are the property of their respective owners. For further information on terms of service & conditions please see Terms & Conditions. Ultrabook, Celeron, Celeron Inside, Core Inside, Intel, Intel Logo, Intel Atom, Intel Atom Inside, Intel Core, Intel Inside, Intel Inside Logo, Intel vPro, Itanium, Itanium Inside, Pentium, Pentium Inside, vPro Inside, Xeon, Xeon Phi, and Xeon Inside are trademarks of Intel Corporation in the U.S. and/or other countries.
          This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
        </p>
      </div>
    </div>

  </body>

</html>

css:

html {
  font-size: 10px;
  font-family: 'Roboto', sans-serif;
  scroll-behavior: smooth;
}


body{
  margin: 0;
  padding: 0;
}
body, body::after, body::before{
  box-sizing: border-box;
}


.container{

  background: #f9f9f9;



}

.parallax {
  padding: 500px;
  background: transparent;
  margin: 0;
  position: relative;

}

.text-justify{
 z-index: 2;
 position: relative;
 background: repeat;
 background-color: #111111;
}

.text-justify p{
  z-index: 7;

  margin-left: 200px;
  margin-right: 200px;
  color: white;

}

.container .containimage .logo1{
  text-align: center;
  position: absolute;
  padding-bottom: 0;
  z-index: +200;
  margin:0 auto;
  margin-top: 900px;



}

.container .containimage .logo1 img{
  width: 1920px;

}

.navlinks{

}

.navlinks ul li:hover{

  transition: .5s;
  opacity: 100%;
}

.navlinks ul li{
  transition: .5s;
  opacity: 20%;
  font-size: 2rem;
}





body { padding: 0; margin: 0; }


.navlinks li a{
  padding-top: 20px;
  padding-bottom: 20px;
  text-transform: uppercase;

}
.navlinks a{
  color: white;
  z-index: 2000;
  text-decoration: none;
  text-align: center;
  display:inline-block;

}

.navbar li{
      display:inline;
}

.navbar{

  list-style:none;
  margin:0;
  padding:0;
  text-align:center;
}



header {
  background-color: #16161e;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100vw;
  height: auto;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color:#16161e;
}

li {

}

li a {
  display: block;
  color: white;

  padding: 14px 16px;
  text-decoration: none;

}

li a:hover {
  background-color: #111;
  transition: 0.5s;

}

p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

*, ::after, ::before {
    box-sizing: border-box;
}

element.style {
}


p {
    margin-top: 0;
    margin-bottom: 0rem;
}
.text-justify {
    text-align: justify!important;
    margin-top: 0;

}



.text2 h1{
  text-align: block;
  font-size: 6rem;
  color: white;

  margin-top: auto;
  margin-bottom: 20px;
  margin-right: 400px;
  margin-left: 400px;
  text-align: center;

  font-weight: 300;
}

.text2 p{
  display: block;
  font-size: 2rem;
  color: white;
  text-align: center;
  margin-top: auto;
  margin-bottom: 20px;
  margin-right: 400px;
  margin-left: 400px;

  font-weight: 100;
  letter-spacing: .1rem;
  line-height: 1.6;
}

.text2 {
    background-color: #111111;
    padding: 100px;
    transform: translate(0,-70%);

}



.img1 a img{

  text-align: center;
  width: 100%;

}



.between img{
  padding: 20px;


}

.between{
  text-align: center;

}

img {
    vertical-align: middle;
    border-style: none;

}

.website:hover{
  color: gold;
  transition: .5s;
}

.website{
  text-decoration: none;
  color: white;
}

.img1{

  text-align: center;
}

.img1 .frames{
    display: inline-block;
    padding: 20px;

}

.between a{
  text-decoration: none;

}

.between img{

  position: relative;
  vertical-align: center;
  float: none;

  top: -80px;

}

.between{
  text-align: center;
}

.superbutton{
  opacity: 100;
  display: flex;
  padding: 10px 30px;
  color: #294f65;
  background-color: #fba174;
  border: 2px solid #294f65;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .1rem;
  transition: .6s ease background-color;
  z-index: +99;
  transition: .5s;
  margin-bottom: 40px;
  margin-top: 1px;
  transform: translate(0,40%);
  position: relative;
  text-decoration: none;
  flex-wrap: wrap;
}

.superbutton:hover{
  color: white;
  background-color: #ff8b52;
  padding: 15px 35px;
  transition: 0.5s;
}

.super{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 50px;
  justify-content: flex-start;
}

.superbutton:active{
  color: white;
  background-color: #294f65;
  padding: 12px 32px;
  transition: 0.1s;
}


/* GEFORCE VIDEO */

#geforce{
  text-align: center;
  background-image: url(https://plecom.imgix.net/bo-557053-geforce-rtx-outriders-bundle-video-bkgd-2560x770-d.jpg?auto=format);
  padding: 70px;
  padding-top: 20px;

}

#geforce .glogo {
  text-align: center;

}

#geforce .glogo img{
  padding: 0px;
  width: 400px;
  top: -190px;
  transform: translate(0,100%);
}


/* GEFORCE VIDEO END*/


@keyframes text_reveal_box{
  50%{
    width: 100%;
    left: 0;
  }
  100%{
    width: 0;
    left: 100%;
  }
}

@keyframes text_reveal{
  100%{
    color: white;
  }
}

@keyframes box{
  100%{
    opacity: 100%;
    font-size: 2rem;
  }
}
@keyframes items_reveal{
  100%{
    flex-basis: 20%;
    opacity: 1;

  }
}
@keyframes title_reveal{
  100%{
    font-size: 4rem;
    opacity: 1;

  }
}

/*Tickets Section*/

.pie {
  background-color: #0d0d0d;
}


#tickets {
  flex-direction: column;
  text-align: center;
  max-width: 1500px;
  margin: 0 auto;
  padding: 20px 0;
}

#ticketstop .sectiontitle h1{
  font-size: 2rem;
  font-weight: 300;
  color: black;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: .2rem;
  text-align: center;
  opacity: 100;

}
.sectiontitle span{
  color: #347f7d;
}

#tickets .sectiontitle{
  font-size: 2rem;
  font-weight: 300;
  color: white;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: .2rem;
  text-align: center;
  opacity: 100;

}

#tickets .sectiontitle span{
  color: #347f7d;
}

#tickets p {
  text-align: justify;
}

#tickets .ticketsbottom{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  transform: translate(0,-30%);
}

#tickets .ticketsitem {

  flex-basis: 15%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0px;
  border-radius: 10px;

  background-size: cover;
  margin: 10px 6px;
  position: relative;
  z-index: +1;
  transition: .2s;
  box-sizing: border-box;


}

#tickets .ticketsitem::after{
  content: '';
  position: absolute;
  left:0;
  top: 0;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(60deg, #26323c 0%, #485563 100%);
  opacity: .8;
  z-index: -1;
  border-radius: 10px;
}

#tickets .ticketsbottom .icon{
  height: 80px;
  width: 20px;
  margin-bottom: 25px;
}



#tickets .ticketsbottom .icon img{
  margin-left: auto;
  margin-right: auto;
  transform: translate(-50%,-70%);
  width: 350px;
  position: absolute;
  opacity: 100;
}

#tickets .ticketsbottom .icon:hover img{
  opacity: 0
}


#tickets .ticketsbottom .icon .iconinside img{
  margin-left: auto;
  margin-right: auto;
  transform: translate(-50%,-70%);
  width: 350px;
  position: absolute;
  opacity: 0;
}

#tickets .ticketsbottom .icon .iconinside img:hover{

  opacity: 100;


}


#tickets .ticketsitem h2{
  font-size: 3rem;
  color: white;
  margin-bottom: 10px;
  text-transform: uppercase;
}

#tickets .ticketsitem p{
  color: white;
  text-align: left;
  font-size: 1.4rem;
  line-height: 1.9rem;
  white-space: nowrap;
}



#tickets .ticketsitem:hover{
  position: relative;

  transition: 0.1s;
}

/* END TICKETS Section */

/*above tickets*/
.abovepic{
  text-align: center;
  transform: translate(0,-35%);
  padding-bottom: 0;
}
/*below tickets*/


* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 900px;
  position: relative;
  margin: auto;
  margin-top: 100px;


}



/* Hide the images by default */
.mySlides {
  display: none;
  text-align: center;

}



/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: -500px;
  transform: translate(0,-380%);
  border-radius: 3px 0 0 3px;
}

.prev{
  left: -500px;
  transform: translate(0,-380%);
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  opacity: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
  transform: translate(0,-40%);
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

.mySlides{

  transform: translate(-50%,-55%);
  text-align: center;
  display: flex;
}

.mySlides img{
  width: 200%;
  left: auto;
  right: auto;
}


.slide{
    background-image: url(./assets/background/back1.png);
    padding:50px;
    padding-top: 115px;
    margin:0 auto;
    margin-top: -200px;

}








.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  margin: 0 -16px;
}

.col-25 {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
}

.col-50 {
  -ms-flex: 50%; /* IE10 */
  flex: 50%;
}

.col-75 {
  -ms-flex: 75%; /* IE10 */
  flex: 75%;
}

.col-25,
.col-50,
.col-75 {
  padding: 0 16px;
}

.container .containimage {

      display: flex;
      justify-content: center;
      align-items: center;

      box-shadow: inset 0 0 300px rgba(0, 0, 0, 0.3);
      z-index: +10000;
}

input[type=text] {
  width: 100%;
  margin-bottom: 20px;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

label {
  margin-bottom: 10px;
  display: block;
}

.icon-container {
  margin-bottom: 20px;
  padding: 7px 0;
  font-size: 24px;
}

.btn {
  background-color: #4CAF50;
  color: white;
  padding: 12px;
  margin: 10px 0;
  border: none;
  width: 100%;
  border-radius: 3px;
  cursor: pointer;
  font-size: 17px;
}

.btn:hover {
  background-color: #45a049;
}

span.price {
  float: right;
  color: grey;
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other (and change the direction - make the "cart" column go on top) */
@media (max-width: 800px) {
  .row {
    flex-direction: column-reverse;
  }
  .col-25 {
    margin-bottom: 20px;
  }
}

【问题讨论】：

这个问题太笼统了。乍一看，有很多方法与响应式布局相去甚远。在填充、宽度等上强制像素单元没有响应。在大多数情况下，响应式设计使用百分比单位。 Bootstrap 的所有网格类都是基于百分比的，并与specific breakpoints的媒体查询一起使用
我想说的是我的整个帖子是我已经制作了一个 html 网站，当我快要完成时，他建议引导.. 所以我尝试在创建一半以上之后实施它我的网站，我只是想知道当它到处都坏了时如何使用它
谢谢btw ????感谢您的帮助

标签： javascript html css twitter-bootstrap

【解决方案1】：

我看到您没有使用任何 Bootstrap 的网格类来制作匹配每个屏幕并平滑调整图像和内容大小的响应式布局，这是一个示例：

在html

<section class="tickets">
    <div class="row">
        <div class="tickets_item col-sm-12 col-md-4">
            <img src="./images/image.jpg" alt="">
        </div>
        <div class="tickets_item col-sm-12 col-md-4">
            <img src="./images/image.jpg" alt="">
        </div>
        <div class="tickets_item col-sm-12 col-md-4">
            <img src="./images/image.jpg" alt="">
        </div>
    </div>
</section>

要使用Bootstrap建立响应式布局，你需要使用bootstrap .row类，在Bootstrap中，.row类主要用于在其中保存列。 Bootstrap 将每一行划分为一个由 12 个虚拟列组成的网格。请阅读Bootstrap's Grid system Documentation page

所以在 <div class="row"></div> 内部默认有一个虚拟的 12 列，您可以通过添加 .col- + screen size + column count 为小/中/大/xlarge 屏幕中的每个 ticket_item 提供自定义宽度： .col-sm-12 在小屏幕中提供全宽。 .col-md-6 给出半宽，即中等屏幕中的 6 列。 .col-lg-4 给出 33.333 % 的宽度，即大屏幕中的 4/12 列。

【讨论】：

因此，当我将 '
' 及其行 div 和关闭 div 添加到我的代码中时，它看起来很奇怪：