添加全宽横幅并使其 bootstrap 响应

Question

我正在尝试修改 bootstrap 模板以在顶部添加全长 1200 像素的横幅，而不是较小的 120 x 60 [=26] =].png 原始站点上的徽标。

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

我假设原始徽标太小了，不需要调用代码来使其响应。

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

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

Answer 1

您可以为 header 和 remove/hide 徽标图像设置背景图像。

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

Answer 2

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

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

添加全宽横幅并使其 bootstrap 响应

Adding a full width banner and making it bootstrap responsive

html

css

banner

responsive-design

twitter-bootstrap