gpt4 book ai didi

html - Bootstrap : container-fluid and Year Calendar

转载 作者:行者123 更新时间:2023-11-27 23:26:49 25 4
gpt4 key购买 nike

当我将 bootstrap 年历添加到我的站点时,它会很好地放在其中一个容器中...

http://www.bootstrap-year-calendar.com/

一切正常(或多或少),但日历左侧有一个非常短的滚动条,我不知道为什么 :(

我需要更改什么才能删除该滚动条?

html,
body {
font-family: 'Alice', Arial, Tahoma;
padding-top: 40px;
}
#section-1,
#section-2,
#section-3,
#section-4,
#section-5,
#section-6,
#section-7,
#section-8 {
padding-top: 50px;
}
#headingindex {
text-align: center;
}
/*
@media screen and (max-width: 768px) {
#section-1, #section-2, #section-3, #section-4, #section-5, #section-6, #section-7, #section-8 {
padding-top: 50px;
}
}*/

p.wp-caption-text {
font-size: 10px;
line-height: 1;
margin: 0;
padding: 3px;
text-align: right;
}
<!DOCTYPE html>
<html lang="de">

<head>
<!-- Bootstrap -->
<link href='https://fonts.googleapis.com/css?family=Alice' rel='stylesheet' type='text/css'>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/bootstrap-year-calendar.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap-year-calendar.js"></script>
<![endif]-->
</head>

<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="thumbnail">
<div class="caption">
<h2>Verfügbarkeit</h2>
<div class="calendar-demo"></div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap-year-calendar.js"></script>
<script>
$('.calendar-demo').calendar({
displayWeekNumber: true,
style: 'background',
alwaysHalfDay: true,
enableContextMenu: true,
enableRangeSelection: false,
mouseOnDay: function(e) {
if (e.events.length > 0) {
var content = '';

for (var i in e.events) {
content += '<div class="event-tooltip-content">' + '<div class="event-name" style="color:' + e.events[i].color + '">' + e.events[i].name + '</div>' + '</div>';
}

$(e.element).popover({
trigger: 'manual',
container: 'body',
html: true,
content: content
});

$(e.element).popover('show');
}
},
mouseOutDay: function(e) {
if (e.events.length > 0) {
$(e.element).popover('hide');
}
},
dayContextMenu: function(e) {
$(e.element).popover('hide');
},
dataSource: [{
id: 0,
name: 'Reserviert: 117',
startDate: new Date(2016, 3, 8),
endDate: new Date(2016, 3, 17)
}, {
id: 1,
name: 'Reserviert: P&G',
startDate: new Date(2016, 06, 12),
endDate: new Date(2016, 06, 18)
}]
});
</script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body>

</html>

最佳答案

使用这个 CSS(在日历 CSS 之后):

.calendar {
overflow: visible;
}

关于html - Bootstrap : container-fluid and Year Calendar,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38169079/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com