ジャンボトロンの要素が正しく整列していません

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としてあなたのレイアウトのためのterラッパー。このため、彼らはよく巣立つ傾向がありません。あなたの.date要素の兄弟として持っているものはレイアウトを破っています。

.jumbotronの内容の間隔については、Bootstrapはデフォルトでかなり劇的なパディングをそのクラスに割り当てます。 .jumbotronルールで独自の値で上書きすることを検討してください。その他の問題 - .jumbotronの内容が容器から出ている - これはheight: 100pxの結果です。 overflowプロパティを追加/変更することにより、コンテンツが.jumbotronの境界を超えて空間を占めるのを防ぐことができます。 これは意見の問題かもしれませんが、通常はCSS内にheightを設定しないようにし、コンテンツがコンテナのサイズを定義できるようにすることをお勧めします。特に、コンテンツがCMS /クライアント駆動の場合。

.containerを削除すると、.dateとが縦に積み重なる問題があります。これに対処するには、.rowという要素を.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