对必须在视口之间调整大小的图像使用 bootstrap

Question

我正在使用 Twitters Bootstrap 网格系统创建站点 header，如下例所示：

这一切正常，直到您开始减小屏幕尺寸，在这种情况下，页面标题和徽标像这样合并在一起：

理想情况下，我希望最终结果在 phone 视口中看起来像这样：

这是我当前的代码

HTML

<div class="pull-left fullWidth container">
    <div class="row">
        <div class="classHeader col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <img class="pull-right smallLogo" src="http://identityview.net/wp-content/themes/identityview/templates/Corporate-Logo-With-Flower-Motif-single.png" />
            <h3 class="fifteenPxSpacing pull-left bottomAlign">My New Title</h3>
        </div>
    </div>
</div>

CSS

  .classHeader
  {
      position: relative; 
      padding: 0;
      height: 120px;
      width: 100%;
      margin: 40px 0 0 0;
      border: 1px solid black;
  }

  .smallLogo
  {
      height: 115px;
      width: 180px;
      padding: 10px;
  }

  .fullWidth
  {
      width: 100%;
  }

  .bottomAlign
  {
    position: absolute; 
    bottom: 0;
  }

  .fifteenPxSpacing
  {
     margin: 15px;
  }

和 here is a Fiddle 这样当您将浏览器调整到最小时，您可以准确地看到发生了什么。

我知道不同的浏览器在台式机、笔记本电脑等中允许不同的最小浏览器大小，因此我使用 Firefox 35.0 作为参考

我试过的

我尝试将 bootstrap 列设置为两列，而不是一列，其中每列各占行的 50%，但这没有用。

<div class="pull-left fullWidth container">
    <div class="row">
        <div class="classHeader col-xs-12 col-sm-12 col-md-12 col-lg-12"> //setting as one containing row first
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"><img class="pull-right smallLogo" src="http://identityview.net/wp-content/themes/identityview/templates/Corporate-Logo-With-Flower-Motif-single.png" /></div> //then attempting to break into two columns within parent row
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"><h3 class="fifteenPxSpacing pull-left bottomAlign">My New Title</h3></div>
        </div>
    </div>
</div>

Answer 1

你可以在logo上加col-xs-* 类，然后header会根据屏幕大小增减。我在更新后的代码中所做的，您可以查看 fiddle.

http://jsfiddle.net/swapnilmotewar/zj9v81t7/6/

<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre><code>     .classHeader
        {
            position: relative; 
            padding: 0;
            height: 120px;
            width: 100%;
            margin: 40px 0 0 0;
            border: 1px solid black;
        }

      .smallLogo{
          width: 100%;
          height: 115px;
          padding: 10px;
       
      }

      .fullWidth
      {
          width: 100%;
      }

      .bottomAlign
      {
        position: absolute; 
        bottom: 0;
      }

        .fifteenPxSpacing
        {
            margin: 15px;
        }

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.1.2/d3.min.js"></script>
    <div class="pull-left fullWidth container">
        <div class="row">
            <div class="classHeader col-xs-12 col-sm-12 col-md-12 col-lg-12">
             <div class="col-xs-6  pull-right ">
                 <img class="smallLogo" src="http://identityview.net/wp-content/themes/identityview/templates/Corporate-Logo-With-Flower-Motif-single.png" />
             </div>
             
                <h3 class="fifteenPxSpacing pull-left bottomAlign col-xs-6">My New Title</h3>
             
            </div>
        </div>
    </div>

Answer 2

您需要为此添加媒体查询：另请参阅 jsfiddle：http://jsfiddle.net/zj9v81t7/9/

@media screen and (max-width:640px){

.fifteenPxSpacing {
    margin: 5px;
}    

 .pull-left {
    right: 0;
}   


}

对必须在视口之间调整大小的图像使用 bootstrap

Use of bootstrap with images that must resize between viewports

css

twitter-bootstrap

这是我当前的代码

我试过的