패딩 COMAND가 나는 부분

`패딩 COMAND가 나는 부분

/* Style by CSS */ 
 

 
html, 
 
body { 
 
\t height: 100%; 
 
} 
 

 
img{ 
 
\t max-width: 100%; 
 
} 
 

 
/* Cover */ 
 

 
#cover { 
 
\t background: #222 url("../images/123.jpg") center center no-repeat; 
 
\t background-size: cover; 
 
\t color: white; 
 
\t height: 100%; 
 
\t text-align: center; 
 
\t display: flex; 
 
\t align-items: center; 
 
} 
 

 
#cover-caption { 
 
    width: 100%; 
 
} 
 

 
#cover form { 
 
justify-content: center; 
 
} 
 

 
.carousel-inner > .carousel-item > img { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

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

 
#about { 
 
\t background: url('../images/girlincar.jpg') center center no-repeat; 
 
\t background-size: cover; 
 
\t text-align: center; 
 
} 
 

 
.about-text { 
 
\t background: rgba(0,0,0,0.8); 
 
\t color: white; 
 
\t 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="[email protected]"> 
 
         </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 사이에 공백을 만들 수 없습니다, 작동하지 않습니다!

저는 웹 디자인을 처음 접했고, 지금은 처음으로 부트 스트랩 4 프로젝트를 진행하고 있습니다. 모든 것이 거의 훌륭하지만 css3의 상단 공간에 대한 "패딩"명령이 작동하지 않습니다. 두 섹션 사이에 80px (5rem)만큼 간격을 만들고 싶습니다. 왜 작동하지 않는지 실감하지 않습니다. 구현을 위해 sublimetext3 forwriting 및 Google 크롬을 사용하고 있습니다. 아래 코드.

<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; 
}

출처

2017-10-15 Radu Dan Grecu

jsfiddle을 제공하십시오. https://jsfiddle.net/smajl/ck43ofL8/ 아니면 다음과 같이하고 싶습니까? https://jsfiddle.net/smajl/ck43ofL8/2/ 모르겠다. 피들을 제공하거나 "... 작동하지 않는다"에 대해 더 구체적으로 말하지 않습니다. :) – smajl

제공했는지 확인해주세요! 네가 나에게 보여준 것이 내가 한 일이기 때문에 작동하지 않는다. –

제발 당신은 "우리가 무엇을 할"귀하의 실제 작업 HTML에서 텍스트를 검사하고 거기에 CSS를 참조하십시오. 스크린 샷을 표시하면 도움이 될 것입니다. –

대신 패딩의 여백을 사용해보십시오.

출처

2017-10-15 10:45:15

여백을 시도했는데 아무 것도 작동하지 않는 것 같습니다 ... –

제공된 코드 조각에서 "수행 할 작업"섹션에 올바른 패딩이 있습니다. 다음 단원 인 "About us"는 클래스 이름에 오타가 있기 때문에 발생하지 않습니다. section-content 대 section content (대시 없음). 스크린 샷은 "우리가하는 일"에 패딩이 누락되어 있음을 보여 주지만 스 니펫에서 복제하지 않았기 때문에 당신을 도울 수는 없습니다.

출처

2017-10-15 11:40:07 smajl

"이해하지 못 하겠지만 스 니펫에서 복제하지 않았으므로 그 점을 도와 드릴 수는 없습니다." 그것이 전체 코드이며 실수를 바로 잡았지만 아무것도 일어나지 않고 패딩이 없습니다. 그리고 그것이 패딩이라는 것을 알았다면 실제로는 캐 러셀 (이미지)이며 패딩이 전혀 없습니다 ... –

https://imgur.com/WUdxgk7 최신 Chrome에서 스 니펫에 패딩이 나타납니다. 어떤 브라우저를 사용하고 있습니까? – smajl

Google 크롬 브라우저 –

안녕하세요, 코드 패딩이 정상적으로 작동하는지 확인했지만 패딩은 상자 내에서만 공간 또는 간격을 유지하는 데 사용됩니다. 두 블록 사이의 공간을 유지하려면 여백이나 U를 사용해야합니다. #about 섹션에도 패딩을 지정하면됩니다.

출처

2017-10-15 13:00:19 srinivas

패딩 COMAND가 나는 부분

답변

관련 문제