Question

这是我第一次建立一个网站。我选择了一个免费的bootstrap 3主题，并从那里开始编辑它，试着把它全部搞定。到目前为止它一直进展顺利，但我在尝试在我的网站上水平居中倒数计时器时遇到了问题（http://romy.landofthelegend.com/index.php?cID=1）

我尝试使用HTML，js和CSS进行操作，但是如果有更改，计时器仍然会向左对齐但是会有一个单词分隔符。

＆＃13;

  var finalDate = '2017/04/14';
  $('div#counter').countdown(finalDate)
    .on('update.countdown', function(event) {

      $(this).html(event.strftime('<div class=\"half\">' +
        '<span>%D <sup>days</sup></span>' +
        '<span>%H <sup>hours</sup></span>' +
        '</div>' +
        '<div class=\"half\">' +
        '<span>%M <sup>mins</sup></span>' +
        '<span>%S <sup>secs</sup></span>' +
        '</div>'));

    });

＆＃13;

.main-content-tablecell {
  display: table-cell;
  vertical-align: bottom;
  z-index: 700;
}
.main-content-tablecell .row {
  position: relative;
  padding-top: 4.2rem;
  padding-bottom: 15rem;
}
.main-content-tablecell #counter {
  margin-bottom: 4.2rem;
}
.main-content-tablecell #counter:before,
.main-content-tablecell #counter:after {
  content: "";
  display: table;
}
.main-content-tablecell #counter:after {
  clear: both;
}
.main-content-tablecell #counter .half {
  float: left;
}
.main-content-tablecell #counter span {
  float: left;
  text-align: right;
  color: #FFFFFF;
  font-family: "roboto-black", sans-serif;
  font-size: 12rem;
  line-height: 1;
  padding: 0;
  margin-bottom: 1.5rem;
}
.main-content-tablecell #counter span sup {
  font-family: "roboto-bold", sans-serif;
  font-size: .17em;
  color: rgba(255, 255, 255, 0.3);
  top: -3.6em;
  right: 1em;
}
.main-content-tablecell h1 {
  font-size: 4.2rem;
  line-height: 1.143;
  color: #FFFFFF;
  margin-bottom: 1.2rem;
  max-width: 600px;
  position: relative;
}
.main-content-tablecell p {
  color: rgba(255, 255, 255, 0.3);
  font-family: "roboto-regular", sans-serif;
  font-size: 1.8rem;
  max-width: 400px;

＆＃13;

<div class="row">
  <div class="col-md-2 col-md-offset-5">
    <div class="col-twelve">
      <div id="counter">
        <div class="center-div">
          <span class="inner">94 <sup>days</sup></span> 
          <span class="inner">23 <sup>hours</sup></span>
        </div>
        <div class="center-div">
          <span class="inner"> 40 <sup>mins</sup></span>
          <span class="inner">03 <sup>secs</sup></span>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

请尝试通过解释尽可能简单，因为我还在学习:) 先感谢您！

Answer 1

我建议首先查看bootstrap css并了解网格系统和现有组件结构。尝试重用已经存在的东西。 http://getbootstrap.com/css/#overview

<!DOCTYPE html>
<html lang="en">
 <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap</title>

    <!-- Bootstrap -->
    <link href="http://getbootstrap.com/dist/css/bootstrap.min.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.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    </head>
    <body>

	 <div class="contianer">  <!-- Boostrap main contianer (Bootstrap requires a containing element to wrap site contents and house in grid system.) http://getbootstrap.com/css/#overview-container-->
     <div class="row">
    <div class="col-md-2 col-md-offset-5">
        <div class="col-twelve">
            <div id="counter" class="text-center"></div>
                
        </div>
    </div>
    </div>
	</div>
	
	 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
	<script src="http://cdn.rawgit.com/hilios/jQuery.countdown/2.2.0/dist/jquery.countdown.min.js"></script>
	<script>
	var finalDate = '2017/04/14';

    $('#counter').countdown(finalDate)
    .on('update.countdown', function(event) {

        $(this).html(event.strftime('<div>' +
                                             '<span>%D <sup>days</sup></span>' + 
                                             '<span>%H <sup>hours</sup></span>' + 
                                             '</div>' +
                                             '<div class=\"half\">' +
                                             '<span>%M <sup>mins</sup></span>' +
                                             '<span>%S <sup>secs</sup></span>' +
                                             '</div>'));

   });
	</script>
    </body>
</html>

尝试水平对齐倒数计时器（第一次编码/建立）

1 个答案: