Question

我希望此页面主要部分的内容略微偏离标题和页面中心，而不是位于左边距。

https://www.comparestonehengetours.com/tour/products.php?q=Christmas+Day+Traditional+Lunch+Cruise+on+the+River+Thames

非常感谢您提供的任何帮助！

Answer 1

要在导航下方引入间隙，请在其底部添加一些边距：

#mj-righttop {
    margin-bottom: 25px;
}

要集中主要内容，请为其自动左右边距：

.site-content.container {
    margin-left: auto;
    margin-right: auto;
}

在上面的内容之后，由于你已经拥有这个CSS，主要内容将向左偏移超过预期：

@media (min-width: 1200px) {
    .row {
        margin-left: -30px;
    }
}

因此，删除行类上的margin-left，或专门为容器中的行覆盖它：

.site-content.container .row {
    margin-left: auto;
}

将所有内容放在一起，这就是您需要添加的内容：

#mj-righttop {
    margin-bottom: 25px;
}

.site-content.container {
    margin-left: auto;
    margin-right: auto;
}

.site-content.container .row {
    margin-left: auto;
}

Answer 2

我看到你使用Zurb粉底!! 那你为什么不试试呢？

`<div class="site-content large-9 large-centered small-12 columns">`

而不是

`<div class="site-content container">`

Answer 3

Jsfiddle也许这不是最佳答案，但它可以解决您的问题

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

<div class="container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
    <img src="https://www.google.com/search?q=testing&espv=2&biw=1842&bih=1014&source=lnms&tbm=isch&sa=X&ved=0ahUKEwje-43Yy9_PAhUDvY8KHZqMB0QQ_AUICCgD#imgrc=p8m10A4tMfsszM%3A" alt="testing" width="100px" height="100px" align="right">
  </div>

  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
    <p>
    testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing
    </p>
  </div>

</div>

</div>

我在这个页面中用css做错了什么不是为了集中内容？

3 个答案: