Question

当我将bootstrap年度日历添加到我的网站时，它将很好地放在其中一个容器中......

一切正常（或多或少），但日历左侧有一个非常短的滚动条，我不知道为什么：（

删除滚动条需要更改什么？

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>

Answer 1

使用此CSS（在日历CSS之后）：

.calendar {
  overflow: visible;
}

Answer 2

将CSS method1 ((StringBuilder) null);添加到滚动的任何内容中。它将隐藏垂直滚动条。如果它是水平的，请使用overflow-y:hidden;但是如果你可以滚动一个元素，表明元素大于容器。

Bootstrap：容器流体和年历

2 个答案: