添加全角横幅并使其响应引导程序

Question

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

我尝试无济于事，但我希望能够将较大的横幅广告完美地放在桌面上，同时使其在移动设备上能够响应。

我认为原始徽标是如此之小，以至于不需要响应代码就可以使其具有响应能力。

请问有没有足够友善的人来看看，看看他们是否可以提供必要的HTML和CSS代码来为我实现这一目标。

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

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

Answer 2

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

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