Bootstrap列太靠近屏幕边缘

时间:2016-04-27 07:47:16

标签: twitter-bootstrap

我是新手,我正在努力获得我想要的定位。内容太靠近浏览器的边缘,而不是更偏向中间(见图)我尝试了一些CSS虽然有所帮助,但仍然不对,所以我把它拿出来了。我确实尝试使用max-width使它变小但是我无法在中心得到它。

enter image description here

<div class="main-container">
<div class="row">
   <div class="col-md-12">
      <h1 class="contactformch1">
         CONTACT
      </h1>
   </div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
   <div class="col-md-4 text-center">
      <h4>
         Heading
      </h4>
      <p>
         Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
      </p>
      <p>
         <a class="btn" href="#">View details »</a>
      </p>
   </div>
   <div class="col-md-4 text-center">
      <h4>
         Heading
      </h4>
      <p>
         Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
      </p>
      <p>
         <a class="btn" href="#">View details »</a>
      </p>
   </div>
   <div class="col-md-4 text-center">
      <h4>
         Heading
      </h4>
      <p>
         Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
      </p>
      <p>
         <a class="btn" href="#">View details »</a>
      </p>
   </div>
</div>
<div class="row">
<div class="col-md-12">
   <h5 class="text-center">
      h3. Lorem ipsum dolor sit amet.
   </h5>
</div>

2 个答案:

答案 0 :(得分:1)

我猜您在顶部使用<div class="container-fluid"。如果是这种情况,请尝试<div class="container"

<div class="container">
  <div class="row">
     <div class="col-md-12">
        ...
     </div>
  </div>
  <div class="row">
    ...

查看bootply上的效果。

enter image description here

答案 1 :(得分:0)

 "";"Could be a Trojan horse JS/Exploit, ....\.svn\pristine\8c\8c617a95755954db9119b49ddfe343588e486175.svn-base";"Unresolved";"File or Directory";"4/27/2016, 10:21:46 AM"

你必须至少有一个容器,这样你就可以默认填充两个边。 如果您想要全宽,可以将 ref.observeEventType( .Value, withBlock: { snapshot in //lets consider you have reached up to "favarites" let favarites = snapshot?.value as! [ String : [ String : AnyObject ] ] //In "favarites" array you will get whole list for favarite in favarites { let favPost = favarite.1[ "favPost" ] as? String //to access value part print("\(favPost) Printed" } } 替换为<div class="container"> <div class="row"> <!-- your code here --> </div> </div>