점보트론의 요소가 올바르게 정렬되지 않았습니다.

Question

안녕하세요! 점보 트론을 내 캘린더 아이콘에 맞춰야하는 투쟁을하고 있습니다. 그리고 점보 트론의 요소는 그 내부에 있지 않습니다. 누군가가이 문제를 해결하는 방법을 도울 수 있습니까? 아이디어? 방금 부트 스트랩과 CSS를 공부하기 시작했습니다.

다음은 사진입니다.

여기 내 html 코드이다. 여기

<div class="events"> 
    <div class="container"> 
    <div class="row"> 
     <div class= "col-sm-4 col-xs-25"> 
     <h4 id="event"><i class="fa fa-calendar" aria-hidden="true"></i> Upcoming Events</h4> 
     <hr class="carved"> 
     <div class="date"> 
      <span class="month">August</span> 
      <h1 class="day">28</h1> 
     </div> 
     <div class="container"> 
      <div class="jumbotron"> 
      <h4>Sample Title</h4> 
      <p>IT Thesis defense</p> 
      <h6>7:00 AM - 8:00 PM</h6> 
      </div> 
     </div> 
     <hr class="divider"> 
     <div class="date"> 
      <span class="month">August</span> 
      <h1 class="day">28</h1> 
     </div> 
     <hr class="divider"> 
     <div class="date"> 
      <span class="month">August</span> 
      <h1 class="day">28</h1> 
     </div> 
     </div> 
     <div class= "col-sm-8 col-xs-25"> 
     <h4 id="event"><i class="fa fa-newspaper-o" aria-hidden="true"></i> Latest News</h4> 
     <hr class="carved"> 
     </div> 
    </div> 
    </div> 
</div> 

내 CSS입니다

#event { 
    color: #a92419; 
} 
hr.carved { 
    clear: both; 
    float: none; 
    width: 100%; 
    height: 2px; 
    border: none; 
    background: #ddd; 
    background-image: -webkit-gradient(
     linear, 
     left top, 
     left bottom, 
     color-stop(0.5, rgb(126,27,18)), 
     color-stop(0.5, rgb(211,45,31)) 
); 
    background-image: -moz-linear-gradient(
     center top, 
     rgb(126,27,18) 50%, 
     rgb(211,45,31) 50% 
); 
} 
.date { 
    display: block; 
    width: 60px; 
    height: 60px; 
    margin-bottom: 20px; 
    background: #fff; 
    text-align: center; 
    font-family: 'Helvetica', sans-serif; 
    position: relative; 
} 
.date .month { 
    background: #a92419; 
    display: block; 
    padding-bottom: 5px; 
    padding-top: 5px; 
    color: #fff; 
    font-size: 10px; 
    font-weight: bold; 
    border-bottom: 2px solid #a92419; 
    box-shadow: inset 0 -1px 0 0 #a92419; 
} 

.date .day { 
    display: block; 
    margin: 0; 
    padding-bottom: 10px; 
    padding-top: 5px; 
    text-align: center; 
    font-size: 20px; 
    color:#a92419; 
    box-shadow: 0 0 3px #ccc; 
    position: relative; 
} 

.date .day::after { 
    content: ''; 
    display: block; 
    height: 95%; 
    width: 96%; 
    position: absolute; 
    top: 3px; 
    left: 2%; 
    z-index: -1; 
    box-shadow: 0 0 3px #ccc; 
} 

.date .day::before { 
    content: ''; 
    display: block; 
    height: 90%; 
    width: 90%; 
    position: absolute; 
    top: 6px; 
    left: 5%; 
    z-index: -1; 
} 
.jumbotron { 
    width: 300px; 
    height: 100px; 
    margin:none; 
} 
.jumbotron p { 
    font-size:12px; 
} 

Answer 1

.container 클래스는 자신의 폭 (들)을 수행하고 사용하기위한 것입니다 OU로서 귀하의 레이아웃에 대한 래퍼 래퍼. 그렇기 때문에 그들은 둥지를 틀지 않는 경향이 있습니다. 당신이 당신의 .date 분류 요소의 형제로서 가지고있는 것은 레이아웃을 깨뜨리는 것입니다.

.jumbotron 내용의 간격에 관해서는 부트 스트랩이 기본적으로 클래스에 꽤 멋진 패딩을 지정합니다. .jumbotron 규칙에서 자신의 값으로 덮어 쓰기를 고려하십시오. 다른 문제 - .jumbotron 내용물이 컨테이너에서 유출되었습니다 - 이는 사용자가 설정중인 height: 100px의 결과입니다. overflow 속성을 추가/수정하여 내용이 .jumbotron 경계를 넘어서는 것을 막을 수 있습니다. 이것은 문제가 될 수 있지만 일반적으로 CSS에 height을 설정하지 말고 내용이 컨테이너의 크기를 정의하게하는 것이 더 좋습니다 - 특히 콘텐츠가 CMS/클라이언트로 구동되는 경우에 특히 그렇습니다.

.container을 제거하면 .date 및 이 세로로 스태킹되는 문제가 발생합니다. 이 문제를 해결하기 위해 요소에 .date 요소에 대한 열과 해당 날짜 이벤트에 대한 열의 날짜 요소를 처리하는 것이 좋습니다.

<hr class="carved"> 

<div class=“row”><!-- the Date wrapper --> 

    <div class="col-sm-4"> 

    <div class="date"> 
     <span class="month">August</span> 
     <h1 class="day">28</h1> 
    </div> 

    </div> 

    <div class="col-sm-8"><!-- this column holds all the Events for this Date --> 

    <div class="jumbotron"> 
     <h4>Sample Title</h4> 
     <p>IT Thesis defense</p> 
     <h6>7:00 AM - 8:00 PM</h6> 
    </div> 

    </div> 

</div> 

참고 : 새로운 구조는 CSS width 속성의 일부 조정이 조금 필요합니다, 나는 날짜 및 이벤트 열을 넣어 col- 장치/크기는 예입니다 - 크기를 필요에 따라.

Answer 2

<div class="container"> 
    <div class="row"> 
     <div class="col-md-2"> 
     <h4 id="event"><i class="fa fa-calendar" aria-hidden="true"></i> Upcoming Events</h4> 
     <hr class="carved"> 
     <div class="date"> 
     <span class="month">August</span> 
     <h1 class="day">28</h1> 
    </div><!-- date --> 
</div><!-- md2 --> 

<div class="col-md-10"> 
<h4 id="event"><i class="fa fa-newspaper-o" aria-hidden="true"></i> Latest News</h4> 
<hr class="carved"> 
    <div class="jumbotron"> 
    <h4>Sample Title</h4> 
    <p>IT Thesis defense</p> 
    <h6>7:00 AM - 8:00 PM</h6> 
    </div><!-- jumbo --> 
</div><!-- md10 --> 

</div><!-row> 
</div><!-- container --> 

+

#event { 
    color: #a92419; 
} 
hr.carved { 
    clear: both; 
    float: none; 
    width: 100%; 
    height: 2px; 
    border: none; 
    background: #ddd; 
    background-image: -webkit-gradient(
     linear, 
     left top, 
     left bottom, 
     color-stop(0.5, rgb(126,27,18)), 
     color-stop(0.5, rgb(211,45,31)) 
); 
    background-image: -moz-linear-gradient(
     center top, 
     rgb(126,27,18) 50%, 
     rgb(211,45,31) 50% 
); 
} 
.date { 
    display: block; 
    width: 60px; 
    height: 60px; 
    margin-bottom: 20px; 
    background: #fff; 
    text-align: center; 
    font-family: 'Helvetica', sans-serif; 
    position: relative; 
} 
.date .month { 
    background: #a92419; 
    display: block; 
    padding-bottom: 5px; 
    padding-top: 5px; 
    color: #fff; 
    font-size: 10px; 
    font-weight: bold; 
    border-bottom: 2px solid #a92419; 
    box-shadow: inset 0 -1px 0 0 #a92419; 
} 

.date .day { 
    display: block; 
    margin: 0; 
    padding-bottom: 10px; 
    padding-top: 5px; 
    text-align: center; 
    font-size: 20px; 
    color:#a92419; 
    box-shadow: 0 0 3px #ccc; 
    position: relative; 
} 

.date .day::after { 
    content: ''; 
    display: block; 
    height: 95%; 
    width: 96%; 
    position: absolute; 
    top: 3px; 
    left: 2%; 
    z-index: -1; 
    box-shadow: 0 0 3px #ccc; 
} 

.date .day::before { 
    content: ''; 
    display: block; 
    height: 90%; 
    width: 90%; 
    position: absolute; 
    top: 6px; 
    left: 5%; 
    z-index: -1; 
} 

Result