Question

`

/* Style by CSS */

html,
body {
	height: 100%;
}

img{
	max-width: 100%;
}

/* Cover */

#cover {
	background: #222 url("../images/123.jpg") center center no-repeat;
	background-size: cover;
	color: white;
	height: 100%;
	text-align: center;
	display: flex;
	align-items: center;
}

#cover-caption  {
    width: 100%;
}

#cover form {
 justify-content: center;
}

.carousel-inner > .carousel-item > img {
    width: 100%;
    height: 100%;
}

.section-content {
	padding: 5rem 0 0;
}

#about {
	background: url('../images/girlincar.jpg') center center no-repeat;
	background-size: cover;
	text-align: center;
}

.about-text {
	background: rgba(0,0,0,0.8);
	color: white;
	padding-top: 1.875rem;
}

  <!DOCTYPE html>
  <html lang="ro">
  <head><!--STARTING HEADING-->

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

    <!--Custom CSS -->
    <link rel="stylesheet" href="assets/css/style.css">

  </head><!--ENDING HEADING-->

  <body><!--STARTING BODY-->

    <section id="cover">
      <div id="cover-caption">
        <div class="container-fluid">
          <div class="col-sm-10 offset-sm-1">
            <h1 class="display-3">Bun Venit pe site-ul nostru!</h1>
            <p>Ma bucur mult ca ati trecut pe aici, in momentul de fata inca invatam cum sa construim un site si cum sa ne atragem clientii intr-un mediu virtual, indiferent de experienta noastra in vanzari, satisfacerea nevoilor clientului,marketing sau pur si simplu, completarea proiectului dumneavoastra cu MOBILA de calitate, in mediul online, mereu ai ceva de invatat.</p>




                    
                      <form action="" class="d-flex justify-content-center form-inline">
                        <div class="form-group">
                        <label class="sr-only">Name</label>
                        <input type="text" class="form-control form-control-lg" placeholder="Jane Doe">
                        </div>

                        <div class="form-group">
                        <label class="sr-only">E-mail</label>
                        <input type="text" class="form-control form-control-lg" placeholder="Jane.Doe@Example.com">
                        </div>

                        <button type="submit" class="btn btn-success">Okay, go!</button> 
                      </form> 
                   
                    <br>

                    <a href="#nav-main" class="btn btn-outline-secondary btn-sm" role="button">&darr;</a>
                  </div>
                </div>
              </div>  
            </section>            


            <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse navbar-full" id="nav-main">
             <a class="navbar-brand" href="#">
               <img src="dre.png" width="30" height="30" class="d-inline-block align-top" alt="">
             </a>
             <button class="navbar-toggler navbar-toggler-right" 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>
            <a class="navbar-brand" href="#">S.C. MOBPROSIM S.R.L</a>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="#">ACASA <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">PRODUSE</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">DESPRE NOI</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">CONTACT</a>
                </li>
              </ul>
              <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="text" placeholder="CAUTA">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">CAUTA</button>
              </form>
            </div>
          </nav>

          <section id="carousel">
            <div id="carousel-home" class="carousel slide" data-ride="carousel">
              <ol class="carousel-indicators">
                <li data-target="#carousel-home" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-home" data-slide-to="1"></li>
                <li data-target="#carousel-home" data-slide-to="2"></li>
              </ol>
              <div class="carousel-inner" role="listbox">
                <div class="carousel-item active">
                  <img src="assets/images/hearthand.jpg" alt="Love is in the air">
                  <div class="carousel-caption d-none d-md-block">
                    <h3>CALITATE</h3>
                    <p>Noi garantam calitatea produselor noastre.</p>
                  </div>
                </div>
                <div class="carousel-item">
                  <img src="assets/images/woman-camera.jpg" alt="Music is my life">
                  <div class="carousel-caption d-none d-md-block">
                    <h3>ORIGINALITATE</h3>
                    <p>Stilul clasic nu are pereche.</p>
                  </div>
                </div>
                <div class="carousel-item">
                  <img src="assets/images/banjo.jpg" alt="Instruments everywhere">
                  <div class="carousel-caption d-none d-md-block">
                    <h3>FUNCTIONABILITATE</h3>
                    <p>Usor de transportat, usor de montat, usor de apreciat.</p>
                  </div>
                </div>
              </div>
              <a class="carousel-control-prev" href="#carousel-home" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="carousel-control-next" href="#carousel-home" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>
            </div>
          </section>

          <section id="what-we-do">
            <div class="section-content">
              <div class="container">
                  <h2>What we do</h2>
                  <div class="card-deck">
                    <p class="lead">Lorem ipsum dolor sit amet, consectetu adipisicing elit, sed do eiusmod
                      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    </div>
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="card-deck">
                        <div class="card" style="width: 5rem;">
                          <div class="card-block">
                            <h4 class="card-title">Strategy &amp; Planning</h4>
                            <h6 class="card-subtitle">Support card subtitle</h6>
                          </div>
                          <img class="card-img-top" class="card-img-bottom img-fluid" src="assets/images/chalkboard.jpg" alt="Writing on a chalkboard">
                          <div class="card-block">
                            <h4 class="card-title">Card title</h4>
                            <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                            <button type="button" class="btn btn-outline-success" data-toggle="modal" data-target="#myModal">learn more
                            </button>
                          </div>
                        </div>
                        <div class="card" style="width: 20rem;">
                          <div class="card-block">
                           <h4 class="card-title">Creative &amp; Design</h4>
                           <h6 class="card-subtitle">Support card subtitle</h6>
                         </div>
                         <img class="card-img-top" class="card-img-bottom img-fluid" src="assets/images/chalkboard.jpg" alt="Writing on a chalkboard">
                         <div class="card-block">
                          <h4 class="card-title">Card title</h4>
                          <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                          <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                          <button type="button" class="btn btn-outline-success" data-toggle="modal" data-target="#myModal">learn more
                          </button>
                        </div>
                      </div>
                      <div class="card" style="width: 20rem;">
                        <div class="card-block">
                         <h4 class="card-title">Creative &amp; Design</h4>
                         <h6 class="card-subtitle">Support card subtitle</h6>
                       </div>
                       <img class="card-img-top" class="card-img-bottom img-fluid" src="assets/images/chalkboard.jpg" alt="Writing on a chalkboard">
                       <div class="card-block">
                        <h4 class="card-title">Card title</h4>
                        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                        <button type="button" class="btn btn-outline-success" data-toggle="modal" data-target="#myModal">learn more
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>


        <section id="about">
          <div class="section content">
            <div class="container">
              <div class="col-md-6">
                <div class="about-text">
                    <h3>About us</h3>
                    <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                    <h5>Follow me on the web</h5>
                    <a href="" class="btn btn-sm btn-outline-secondary">Facebook</a>
                    <a href="" class="btn btn-sm btn-outline-secondary">Instagram</a>
                    <a href="" class="btn btn-sm btn-outline-secondary">Linkdel</a>
                </div>
              </div>
            </div>
          </div>
        </section>

        <!-- jQuery first, then Tether, then Bootstrap JS. -->
        <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
      </body>
      </html>

`https://imgur.com/a/kKaDU - 查看图片！

我对网页设计非常陌生，现在我正在开发我的第一个bootstrap 4项目。一切都差不多好，但css3中顶部空格的“填充”命令不起作用。我想在两个部分之间产生80px（5rem）的差距，我不知道为什么它不起作用。我正在使用sublimetext3 forwriting和google chrome来实现。代码如下。

 <section id="what-we-do">
            <div class="section-content">
              <div class="container">
                  <h2>What we do</h2>
                  <div class="card-deck">
                    <p class="lead">Lorem ipsum dolor sit amet, consectetu adipisicing elit, sed do eiusmod
                      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    </div>
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="card-deck">
                        <div class="card" style="width: 5rem;">
                          <div class="card-block">
                            <h4 class="card-title">Strategy &amp; Planning</h4>
                            <h6 class="card-subtitle">Support card subtitle</h6>
                          </div>

CSS代码：

.section-content {
    padding: 5rem 0;
}

Answer 1

尝试使用边距而不是填充。

Answer 2

因此，在您提供的代码段中，“我们所做的”部分具有正确的填充。下一节“关于我们”不仅仅是因为您在班级名称bool isWithinWeek = Math.Abs(ExportDate.Date - CurrentDate.Date).TotalDays) < 7与import tkinter window = tkinter.Tk() A = [1," ", 3] label = tkinter.Label(window, text = A[0:]) label.pack() window.mainloop()（缺少短划线）中输入了拼写错误。您的屏幕截图显示您在“我们做什么”时也缺少填充，但我无法帮助您，因为您没有在代码段中复制它。

Answer 3

我回顾你的代码填充顶部工作正常，但问题是填充仅用于在框中保持空间或间隙。如果你想在两个块之间保持空间你应该使用保证金或你可以分配填充到#about部分也可以工作。

填充命令是不起作用，我不能在部分之间留出空格

3 个答案: