Bootstrap 3 不均匀 header 颜色

Question

我真的不知道如何用语言表达，所以这是我实际需要创建但不知道如何创建的内容。

我使用的是最新版本的 bootstrap

这是想要的效果 https://www.dropbox.com/s/uwq39tbswp44j1i/desired.jpg?dl=0

这就是我目前拥有的

https://www.dropbox.com/s/ksvgf9ohdmln6xe/Screenshot%202015-05-03%2002.01.19.png?dl=0

这是标记

<div class="container">
   <img class="img-responsive" src="logo.png">
   <h1>The text</h1>
</div>

所以你会建议网站必须响应什么？就移动版本而言，我认为最好的情况是使用较小的字体或将其堆叠在一起。

请帮助我，我很绝望。

Answer 1

不太清楚你的要求，但我会试一试。

我看到的第一个问题是您没有遵循正确的 bootstrap 布局规则（参见 http://getbootstrap.com/css/#grid）。以下是如何操作的示例。要使项目水平排列，您需要 <div class='row'>。以下是我认为您正在寻找的内容。

   <div class="container">
      <div class='row'>
         <div class='col-xs-3'>
            <img class="img-responsive"  src="http://www.xamalot.com/preview/png3/5e78c8d8-3f02-4e3c-9a3a-d95432c606e3" /> 
         </div>
         <div class='col-xs-9'>
            <h1>The text</h1>
         </div>
      </div>
   </div>

我在 http://jsbin.com/mafuxeyebu/1/edit?html,output

整理了一个工作样本

Answer 2

我不完全确定你在问什么，但你可以尝试使用屏幕截图程序将所需的 header 捕获为图像，这样你就不必构建它了。

要使图像在 bootstrap 中响应，您只需使用响应式 class:

<img class="responsive">

我刚刚使用 awesome-screenshot 将其抓取为图像

如果您只想使用此图片，请右键单击>在新选项卡中打开图片

现在您可以使用 GIMP 或 Photoshop 来编辑您的徽标/标语。

显然这是一个解决方法，但我什至不确定这是否是您想要的。

谢谢

Bootstrap 3 不均匀 header 颜色

Bootstrap 3 uneven header color

html

css

responsive-design

twitter-bootstrap