添加全宽横幅并使其引导响应答案

【问题标题】：Adding a full width banner and making it bootstrap responsive添加全宽横幅并使其引导响应
【发布时间】：2016-12-09 16:30:15
【问题描述】：

我正在尝试修改引导模板以在顶部添加一个全长 1200 像素的横幅，而不是较小的 120 x 60 images/logo-company.png strong> 原始网站上的徽标。

我尝试了但无济于事，但我希望能够将这个较大的横幅完美地放置在桌面视图上，同时让它在移动设备上响应。

我认为原始徽标是如此之小，以至于无需调用代码即可使其具有响应性。

有没有人愿意看一看，看看他们是否可以提供必要的 HTML 和/或 CSS 代码来为我实现这一目标。

原始网站。 http://jituchauhan.com/industrial/boxed-layout/industrial-darker/index.html

【问题讨论】：

您是否尝试过将 img-responsive 类应用于横幅图像？
只给标题行一个背景图片
在您的演示中，您不能简单地在引导网格的一部分中进行评论。更改有点复杂。
@Banzay 我很接近，但需要一些最后的帮助。根据我的演示，我希望横幅被点击返回主页，所以我使用 img-responsive 进行 HTML 编辑并更改了 DIV ......我也没有新 div 的 css ...... ..出于某种原因，横幅对我来说似乎被阻止放置在黄色部分的顶部，因为主支架是 1200 并且横幅是 1200 ......但我认为在另一个区域有些东西...... ......我不在乎用什么方法来实现我的愿望，我只想实现它......这可能吗？并贴出代码来实现？？ THX
您对桌面视图中的联系人和社交链接有何打算？你打算隐藏它们吗？

标签： html css twitter-bootstrap responsive-design banner

【解决方案1】：

如果背景图片不适合您，这是一个简单的解决方案：

<div class="header-row" id="header-row" style="padding: 0px; overflow:hidden; height:100px;">
        <!-- container-fluid is the same as container but spans a wider viewport, 
    it still has padding though so you need to remove this either by adding 
    another class with no padding or inline as I did below -->
   <div class="container-fluid" style="padding: 0px;">
      <div class="row"> 
        <!-- You originally has it set up for two columns, remove the second 
    column as it is unneeded and set the first to always span all 12 columns 
    even when at its smallest (xs). Set the overflow to hidden so no matter 
    the height of your image it will never show outside this div-->
         <div class="col-xs-12"> 
            <a class="navbar-brand logo" href="index.html">
        <!-- place your image here -->
               <img src="http://placekitten.com/g/1200/600" alt="company logo" style="width: 100%;">
            </a> 
         </div>     
      </div>
   </div>
</div>

【讨论】：

请在我添加您的代码时查看该站点，我们已接近但仍有一些问题。我知道有一些填充问题，你看到黄色，但不确定横幅上的高度问题。
填充来自 style.css 标题行。如果它是您自己添加的，请删除此内联或样式表中的内容。还设置此类的高度并从 col-xs-12 中删除溢出：隐藏并将其添加到此类（仍然是标题行）-参见编辑
您现在可以看一下链接吗？我在您的导航栏品牌徽标（浮动属性）的代码中添加了一些标记，并在您拥有的标题行内联元素中取出了一些标记......我觉得这似乎是...... .如果可以的话，让我知道这是否是正确的编码和响应等。不急
@DA-G-GURU 不幸的是，这样的编辑不符合既定的 SO 期望，也没有通过审查阶段。但是出于讨论的目的，它被存档在这里：stackoverflow.com/review/suggested-edits/14574396 当您同意解决方案时，通常最好简单地替换答案中的代码而不是附加另一个版本，如果您在编辑消息中解释得很好一定会过去的。快乐堆栈溢出！ :-)
@benneb10 感谢所有，但你的回答 benneb10 是我一起去的那个.... .Thx

【解决方案2】：

您可以为标题设置背景图片并删除/隐藏徽标图片。

#header-row {
  background-image: url(../images/logo-company.png);
}

【讨论】：