全角引导映像答案

【问题标题】：Full-width bootstrap image全角引导映像
【发布时间】：2014-10-01 10:13:03
【问题描述】：

晚上好，

我正在尝试将全角图像作为我的项目的主页，并且我正在使用 Bootstrap，但我无法设法避免图片周围的白边，无论是 only put ，还是我按照我阅读的答案中的建议用 a 或 a 框起来......

这是我的代码：

<div class="container">
    <a href="#" class="thumbnail">
      <%= image_tag("diversite_anglais.png", :alt => "Travail interculturel") %>
    </a>
</div>

<div class="wrapper"><div class="btn-group btn-lg btn-justified">
      <button type="button" class="btn btn-success">OUR SERVICES</button>
      <button type="button" class="btn btn-warning">OUR NETWORK</button>
      <button type="button" class="btn btn-info">OUR PARTNERS</button>
</div></span>

还有我的 CSS：

.container {
  width:100%;
  margin-left: -15px;
  }

.container > img {
  width:100%;
}

变化：

<html>
<body>

<div class="wrapper"><div class="btn-group btn-lg btn-justified">
      <button type="button" class="btn btn-success">OUR SERVICES</button>
      <button type="button" class="btn btn-warning">OUR NETWORK</button>
      <button type="button" class="btn btn-info">OUR PARTNERS</button>
</div></span>

</body>

</html>


.navbar-header {
    padding: 20px;
 }

.navbar-brand {
    float:none;
}

.btn {
    margin: 10px;
}

.wrapper {
    position: absolute;
    top: 80%;
    left: 35%;
    right: 0;
    color: #ffffff;
    font: bold 30px 'Roboto', Sans-Serif;
    padding: 10px;
}

html { 
  background: url(diversite_anglais.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

问题已解决：

$navbar-margin-bottom: -20px;

【问题讨论】：

喜欢这个？ getbootstrap.com/examples/cover
bootstrap 有一个默认导航栏：navbar navbar-default。我建议您将此 css 提供给您的导航栏 box-shadow: none; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; text-shadow: none; 并删除您可能拥有的任何填充。让我知道这是否有效
它不会改变任何东西... :(
我找到了答案！！它需要： $navbar-margin-bottom: -20px;
太棒了！如果您认为我的回答有帮助，请将其作为已接受的答案进行检查。干杯

标签： html twitter-bootstrap width

【解决方案1】：

你可以试试这样的

   html {
      background: url(..img/yourimagefile) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

我会使用html 而不是.container 只是为了确保它始终至少是浏览器窗口的高度。

删除image_tag，改用上面的css。

更多详情HERE

【讨论】：

工作正常，但我仍然在导航栏和图片之间得到一个边距：0.0.0.0:3000
该链接没有帮助，因为它只是您的本地主机。你能用相关的 html 和 css 更新你的问题吗？
它只移动导航栏，但不移动白边...但是提供我的代码将无济于事，因为除了您提供给我的内容外，我没有更改任何内容

【解决方案2】：

这是来自 Bootstrap 的示例 - http://getbootstrap.com/examples/cover/

但除此之外，请确保图像周围没有边距和填充或包含 div。如果您使用上面的示例模板，它应该可以正常工作。

【讨论】：