站点未使用Bootstrap在移动电话上居中

Question

我使用Bootstrap 3，我不确定为什么要抵消 对。

＆＃13;

＆＃13;

<div class="container">
			<div id="content">
				<a href="/winning-films">
							<div class="text-center banner">Check out the 2015 Salt Flats Film winners!!!</div>
				</a>
				 <div class="row">	
						<div id="main-page">
							<h2>SALT FLATS FILM FESTIVAL</h2>
							<div class="center-slider">
								<?php include_once('jssor_slider.php')?>
							</div>
							<h3>Presented by</h3>
							<a href="http://www.kidsfindjoy.org">
							<img class="img-responsive center center-block" src= "/img/joy-logo.jpg">
							</a>
						</div>
				 </div>
			 </div>
		 </div>

＆＃13;

＆＃13;

＆＃13;

是否有人将div与容器类集中在移动设备上？

Answer 1

如果没有看到确切的代码，很难说，但作为一般策略，请使用Chrome开发人员工具检查页面，看看哪个元素比视口宽，从而加宽宽度或他们的父母元素。

Answer 2

好吧，我在这里用类文本中心横幅更改了div的顺序，<a></a>标记必须在div中。

<div class="cointainer">
  <div id="content">

    <div class="text-center banner"><a href="/winning-films">Check out the 2015 Salt Flats Film winners!!!</a></div>

    <div class="row">
      <div id="main-page">
        <h2>SALT FLATS FILM FESTIVAL</h2>
        <div class="center-slider">
          <!--?php include_once('jssor_slider.php')?-->
        </div>
        <h3>Presented by</h3>
        <a href="http://www.kidsfindjoy.org"><img class="img-responsive center center-block" src="/img/joy-logo.jpg"></a>
      </div>
    </div>
  </div>
</div>

第二个建议是验证在你的html头<meta name="viewport" content="width=device-width, initial-scale=1">中使用这一行 这将帮助您将页面置于加载中心并禁用缩放和滚动

第三个建议是使用Pingendo，如果你是一个新的开发人员，这个工具将帮助你生成一个漂亮的视图或与Bootstrap的接口，你会看到HTML代码和CSS3实时起草引导程序的元素到您的视图。

问候！