Fatal编程技术网
  • html/
  • Html 全宽度引导映像

Html 全宽度引导映像

html twitter-bootstrap

Html 全宽度引导映像,html,twitter-bootstrap,width,Html,Twitter Bootstrap,Width,晚上好, 我正试图把一幅全幅图像作为我的项目主页，我正在使用引导，但我无法避免图片周围的白色边距，无论是一个只放的图片，还是我在阅读答案时建议的用a或a框起来的图片 这是我的密码： <div class="container"> <a href="#" class="thumbnail"> <%= image_tag("diversite_anglais.png", :alt => "Travail interculturel") %>

晚上好,

我正试图把一幅全幅图像作为我的项目主页，我正在使用引导，但我无法避免图片周围的白色边距，无论是一个只放的图片，还是我在阅读答案时建议的用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>
变化：

<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;
}
这是一个来自引导的示例-

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

您可以尝试类似的方法

   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\u标签
，改用上面的css

像这样的更多细节？引导有一个默认导航栏：
navbar-navbar-default
。我建议您将此css提供给您的导航栏
box shadow:none-webkit边界半径：0-moz边界半径：0-ms边界半径：0-o-边界半径：0；边界半径：0；文本阴影：无
并删除可能存在的任何填充。让我知道如果这样做没有任何改变…：（我找到了答案！！需要：$navbar margin-bottom:-20px；太棒了！如果你认为我的答案有帮助，请检查它是否被接受。CheersWorks很好，但我仍然在navbar和图片之间留有空白：该链接没有帮助，因为它只是你的本地主机。你能用相关的html和css更新你的问题吗？它只会移动。）导航栏，但不是白边…但是提供我的代码不会有帮助，因为除了你提供给我的以外，我没有改变任何东西 
$navbar-margin-bottom: -20px;

   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;
    }