我需要在中心显示带有class="col-md-6"
这是代码,它向我显示左边的计时器我需要在中心显示时间
<div class="container">
<div class="row">
<div class="wpb_column vc_column_container col-md-6">
<div class="vc_column-inner ">
<div class="wpb_wrapper">
<div class="event-wrapper featured-event ">
<!-- the loop -->
<div class="upcoming-campaign">
<img width="555" height="400" src="http://andrejceccoli.com/wp-content/uploads/2016/10/elezioni_sfondo.jpg" class="img-responsive wp-post-image" alt="Elezioni Politiche">
<div class="campaign-scoop">
<h3 class="title"><a href="http://trendytheme.net/demo2/wp/nominee/onepage/event/election-campaign/">Elezioni Politiche</a></h3>
<span class="start-date">Inizia il: <span class="colored">20 Nov 2016</span></span>
<div class="countdown-wrapper">
<ul class="countdown list-inline" data-countdown="2016-11-20">
<li><span class="days">38<span><p>Days</p></span></span>
</li>
<li><span class="hours">07<span><p>Hour</p></span></span>
</li>
<li><span class="minutes">48<span><p>Minutes</p></span></span>
</li>
<li><span class="second">12<span><p>Second</p></span></span>
</li>
</ul>
</div>
<address><i class="fa fa-map-marker"></i>San Marino</address>
<span class="event-duration colored"><i class="fa fa-clock-o"></i>08:00 AM - 23:00 PM</span>
</div>
<!-- .campaign-scoop -->
</div>
<!-- .upcoming-campaign -->
<!-- end of the loop -->
</div>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分:41)
Bootstrap 3
添加将偏移3列的col-md-offset-3
类,假设Bootstrap有一个12列网格,这将把col-md-6
元素放在中心。
Documentation reference on offsets
Bootstrap 4
使用offset-3
或mx-auto
将col-md-6
列
答案 1 :(得分:3)
我看到你正在使用wordpress。你放置的代码没有正确结束。如果我没错,那么col-md-6的其他部分就在你的行中。 您可以轻松地将时间设置在中心.upcoming-campaign {text-align:center;添加这个。如果有任何问题请在评论中提问我。
.upcoming-campaign {
text-align: center;
}
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="wpb_column vc_column_container col-md-6">
<div class="vc_column-inner ">
<div class="wpb_wrapper">
<div class="event-wrapper featured-event ">
<!-- the loop -->
<div class="upcoming-campaign">
<img width="555" height="400" src="http://andrejceccoli.com/wp-content/uploads/2016/10/elezioni_sfondo.jpg" class="img-responsive wp-post-image" alt="Elezioni Politiche">
<div class="campaign-scoop">
<h3 class="title"><a href="http://trendytheme.net/demo2/wp/nominee/onepage/event/election-campaign/">Elezioni Politiche</a></h3>
<span class="start-date">Inizia il: <span class="colored">20 Nov 2016</span></span>
<div class="countdown-wrapper">
<ul class="countdown list-inline" data-countdown="2016-11-20">
<li><span class="days">38<span><p>Days</p></span></span>
</li>
<li><span class="hours">07<span><p>Hour</p></span></span>
</li>
<li><span class="minutes">48<span><p>Minutes</p></span></span>
</li>
<li><span class="second">12<span><p>Second</p></span></span>
</li>
</ul>
</div>
<address>
<i class="fa fa-map-marker"></i>San Marino
</address>
<span class="event-duration colored"><i class="fa fa-clock-o"></i>08:00 AM - 23:00 PM</span>
</div>
<!-- .campaign-scoop -->
</div>
<!-- .upcoming-campaign -->
<!-- end of the loop -->
</div>
<!-- end of event-wrraper -->
</div>
<!-- end of wpb-wrapper -->
</div>
<!-- end of vc_colum-inner -->
</div>
<!-- end of col-md-6 [1] -->
<div class="wpb_column vc_column_container col-md-6">
<div class="vc_column-inner ">
<div class="wpb_wrapper">
</div>
<!-- end of wpb-wrapper -->
</div>
<!-- end of vc_colum-inner -->
</div>
<!-- end of col-md-6 [2] -->
</div>
<!-- end of Row -->
</div>
<!-- end of the Container -->
</body>
答案 2 :(得分:0)
只需添加“ float:none; margin:auto;”变成这样的div样式:
<div class="col-lg-6" style="float:none;margin:auto;">
.....
</div>
希望有用;)