个人中心
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
文章推荐： c++ - 使用临时实例初始化对象
文章推荐： c++ - 如何从 C++ 中的字符串中调用特定字符？
文章推荐： c++ - 从 std::list 中随机删除？
文章推荐： c++ - 一个实例会影响另一个实例，尽管它不应该
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com