覆盖body标记的scaffolding.less

Question

所以我一直在做一个网页，我刚刚在其中添加了bootstrap，但是当我引导到网站时，它已经覆盖了正文的背景颜色，我附加了下面的小提琴。我希望我的网站看起来像第一张图片，但目前它看起来像第二张图片。

有没有人知道最好的方法来覆盖它，让我的原始颜色背景像第一张图片一样？

​

​

Answer 1

在包含bootstrap.min.css文件后添加此样式。

就像你的style.css文件-

body {
        background-color: #161A25;
        margin:0;
    }
    #logo {
        position:absolute;
    left:0;
    top:0;
    }
    h9
    {
      color: white;
        position:absolute;
    right:25rem;
    top:2.5rem;
        font-size: 10px;
        font-family: 'Raleway', sans-serif;
    }
    h6
    {
      color: white;
        position:absolute;
    right:15rem;
    top:2.5rem;
        font-size: 10px;
        font-family: 'Raleway', sans-serif;
    }
    h7
    {
      color: #32CE87;
        position:absolute;
    right:2rem;
    top:1.5rem;
        font-size: 7px;
        font-family: 'Raleway', sans-serif;
    }

    h8
    {
      color: white;
        position:absolute;
    right:2rem;
    top:1.5rem;
        font-family: 'Raleway', sans-serif;
        font-size: 17px;
       color: #32CE87;
    }

    .footer {
       position: fixed;

       bottom: 0;
       width: 100%;
        height:110px;
       background-color: #2A3046;
       color: white;


    }

    img.logo {
       height: 80px;
         left:3em;
        position: relative

    }
    img.logo1 {
       height: 40px;
        left:3em;

        bottom:2rem;
        position:absolute;
    }



    .my-button {
        display: inline-block;
        margin: 5px;
        background: #32CE87;
        color: white;
        font-size: 1.5em;
        font-family: 'Raleway', sans-serif;
        text-align: center;
        border-radius: 5px;
        padding: 8px 16px;
        -moz-transition: all 0.2s;
        -webkit-transition: all 0.2s;
        transition: all 0.2s;
        width: 100px;
        text-decoration: none;
    }
    .my-button:hover {
        background: #666;
        color: #c1e1e0;
    }
    .center-bottom {
        position: fixed;
        bottom: 12rem;
        width: 100%;
        text-align: center;
    }
    img.arrow {
        max-height: 40px;
    }

    .row {
        background-color: white;
        max-width:100%;
       height: 150px;
        border-radius: 5px;
        padding-top: 20px;
        padding-bottom: 50px;;

        margin-top: 0.1rem;
        margin-left: 25px;
        margin-right: 25px;

    }
    .box1 {
        background-color: white;
        max-width:100%;
        height:150px;
        padding-bottom:50px;

        margin-top: 0.5rem;
        margin-left: 25px;
        margin-right: 25px;
         border-radius: 5px;


    }
    p {
        font-size:7px;
        width:380px;
        position: absolute;
        right:12em;
        text-align: left;
        bottom: 1.5rem;

    }
    img.laptop { 

        height: 60px;
        position: absolute;
        left:0px;
        right: 0px;


        margin-left: auto;
        margin-right: auto; 
    }
    div.bottomtext {
        position: relative;
         left:0px;
        right: 0px;
            font-family: 'Raleway', sans-serif;
        margin-left: auto;
        margin-right: auto; 
        text-align: center;
     width:800px;
        top:4rem;
        font-size: 0.6rem;


    }

    img.textimage
    {
        height:20px;
        left:8rem;
        position: absolute;
         font-family: 'Raleway', sans-serif;
    }

    .images {
        display: inline;
        margin: 0px;
        padding: 0px;
        vertical-align:middle;
        width:200px;
    }
    #content {
        display: block;
        margin: 0px;
        padding: 0px;
        position: relative;
        top: 90px;
        height: auto;
        max-width: auto;
        overflow-y: hidden;
        overflow-x:auto;
        word-wrap:normal;
        white-space:nowrap;
        height: 50px;
    }

    img.column {
        height: 40px;
        width: 100%;
        position: relative;
        padding: 0px;
        margin: 0px;
    }

    img.row
    {height:60px;

    }
    h9:hover {
          color: #32CE87;
    }
    h6:hover {
          color: #32CE87;

    }
    p:hover {
          color: #32CE87;

    }
    h7:hover {
          color: white;

    }
    h8:hover {
          color: white;

    }
     .pt-inner-wrap {
        color: #ecf0f1;
        padding: 15px 0;
        text-align: center;
        color: black;
        border-right: 3px solid #d4d4d4;   
        }

    div.container {

    margin-bottom: 1rem;
    }

在那之后包括这个..包含bootstrap.min.css之后的style.css文件

<!DOCTYPE HTML> 
<html>
<head>
     <meta charset="utf-8">


    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" crossorigin="anonymous">

   <link href="style.css" rel="stylesheet" crossorigin="anonymous">

    </head>   

<body>
    <img src="Logo-Trans.png" class="logo" >

    <div class="toptext"> 
    <h9> GET A QUOTE</h9>
    <h6> RETRIEVE A QUOTE</h6>
    <h7>NEED HELP OR ADVICE?CALL US <br style>  </h7>
        <h8> 0800 0481804</h8>
        </div>



<img src="nav.png" class="column"> 






<div class="container">

  <div class="row">


<div class="col-sm-4">
<div class="pt-inner-wrap">     
    <i class="fa fa-mobile fa-4x"></i>
    <h4 class="pt-title">Mobile &amp Smartphone</h4>
    <h6 class="pt-title">How many would you like to insure</h6>
    <img src="10.png" width="200px" class="img-responsive" style="margin: 0 auto;">
    <h6 class="pt-title">How many would you like to insure</h6>
    <img src="10000.png" width="200px" class="img-responsive" style="margin: 0 auto;">
    <h6 class="pt-title">How many would you like to insure</h6>
    <img src="replacement.png" width="200px" class="img-responsive" style="margin: 0 auto;">
    <h6 class="pt-title">How many would you like to insure</h6>
</div>
</div>
<div class="col-sm-4">
    <div class="pt-inner-wrap">     
    <i class="fa fa-mobile fa-4x"></i>
    <h4 class="pt-title">Ipad's &amp Tablets</h4>
    <h6 class="pt-title">How many would you like to insure</h6>
    <img src="10.png" width="200px" class="img-responsive" style="margin: 0 auto;">
    <h6 class="pt-title">How many would you like to insure</h6>
    <img src="10000.png" width="200px" class="img-responsive" style="margin: 0 auto;">
    <h6 class="pt-title">How many would you like to insure</h6>
    <img src="replacement.png" width="200px" class="img-responsive" style="margin: 0 auto;">
    <h6 class="pt-title">How many would you like to insure</h6>
</div>
</div>
<div class="col-sm-4" >
    <div class="pt-inner-wrap">     
    <i class="fa fa-mobile fa-4x"></i>
    <h4 class="pt-title">Laptops &amp Macs</h4>
    <h6 class="pt-title">How many would you like to insure</h6>
    <img src="10.png" width="200px" class="img-responsive" style="margin: 0 auto;">
    <h6 class="pt-title">How many would you like to insure</h6>
    <img src="10000.png" width="200px" class="img-responsive" style="margin: 0 auto;">
    <h6 class="pt-title">How many would you like to insure</h6>
    <img src="replacement.png" width="200px" class="img-responsive" style="margin: 0 auto;">
    <h6 class="pt-title">How many would you like to insure</h6>
</div>
</div>
  </div>
</div>          

 <!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>




      <div class="box1"> 


<div> <img src="laptop.png" class="laptop"> </div>


<div class="bottomtext">Please enter a figure for the number of individual laptops/macbooks that you would like to insure in each price range. <br> Where you dont want cover with a particular price range, please leave bank.</div>
    </div> 





    <div class="footer">

       <div class="center-bottom">

<a class="my-button" title="Relevant Title" href="#">Back</a>
<a class="my-button" title="Relevant Title" href="#">Next</a>

</div>

  <p> © Insync Insurance Solutions Ltd 2016 All rights reserved. Mobiru is a trading style of Insync Insurance Solutions Ltd which is authorised and regulated by the Financial Conduct Authority. Our registered office is Midland House, 2 Poole Road, Bournemouth, Dorset BH2 5QY and we are registered in England under company number 08810662. Should you have cause to complain, and you are not satisfied with our response to your complaint, you may be able to refer it to the Financial Ombudsman Service, which can be contacted as follows: The Financial Ombudsman Service Exchange Tower, London, E14 9SR | Tel: 0800 023 4567 or 0300 123 9 123 | www.financial-ombudsman.org.uk </p>
          <img src="Logo-Trans.png" class="logo1">
</div>


    </body>





</html>