[英]Elements of the jumbotron is not properly aligned
Good day! 美好的一天! I'm having a struggle to aligned the jumbtron to my calendar icon. 我正在努力使jumbtron对准我的日历图标。 And the elements of the jumbtron is not inside of it. 并且jumbtron的元素不在其中。 Can someone help me how to solve this? 有人可以帮我解决这个问题吗? Ideas? 想法? i just started studying bootstrap and css. 我刚刚开始学习引导程序和CSS。
Here's the picture. 这是图片。
here is my html code. 这是我的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>
here is my css 这是我的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;
}
<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;
}
The .container
class carries its own width(s) and is intended to be used as a outer wrapper for your layout. .container
类具有自己的宽度,并且打算用作布局的外部包装。 Because of this, they do not tend to nest well. 因此,它们不太容易嵌套。 The one you have as a sibling of your .date
classed elements is breaking the layout. 您作为.date
分类元素的同级对象正在破坏布局。
As for the spacing of the .jumbotron
contents, Bootstrap assigns some pretty dramatic padding to that class by default. 至于.jumbotron
内容的间距,Bootstrap默认为该类分配一些非常.jumbotron
填充。 Consider overwriting that with your own values in your .jumbotron
rule. 考虑在.jumbotron
规则中使用您自己的值覆盖它。 The other issue — the .jumbotron
contents bleeding out of their container — that is a result of the height: 100px
you are setting. 另一个问题.jumbotron
内容物从容器中渗出-这是height: 100px
的结果height: 100px
您正在设置height: 100px
。 You can stop the contents from taking up space beyond the boundaries of the .jumbotron
by adding/modifying its overflow
property. 您可以通过添加/修改其overflow
属性来阻止内容占用.jumbotron
边界之外的空间。 This may be a matter of opinion but I think it is usually better to avoid setting height
in the CSS and let the contents define the size of the container — especially in cases where the content is CMS/client driven. 这可能是一个观点,但我认为通常最好避免在CSS中设置height
,而让内容定义容器的大小,尤其是在内容是由CMS /客户端驱动的情况下。
If you remove the .container
, you'll still have the problem of the .date
and .jumbotron
stacking vertically. 如果删除.container
,仍然会出现.date
和.jumbotron
垂直堆叠的问题。 To address that, you might consider treating Date element as .row
with a column for your .date
element, and a column for that Date's event(s). 为了解决这个问题,您可以考虑将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>
Note: The new structure will require a bit of adjustment to some of your CSS width
properties, and the col-
device/sizes I put on the Date and Event columns are just examples — size as needed. 注意:新结构将需要对您的某些CSS width
属性进行一些调整,而我在“日期”和“事件”列上输入的col-
/设备只是示例-根据需要的大小。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.