Question

我必须基于Bootstrap 3框架创建一个响应式网站应用程序。

Bootstrap 3使事物响应的方式是使用12列的网格布局缩小。

据我所知，Bootstrap 3首先设计移动设备并扩展（!!）。

问题在于无论我如何重新编码12列网格系统的排列，无论我是否定义了最小宽度，最小高度，最大宽度，最大高度，宽度，高度等。定义固定尺寸的图像，图像要么缩小到很小，要么它的尺度非常大 - 我的客户不喜欢这个！

以下是我正在处理的代码。首先是HTML代码，然后是下面附带的CSS代码，它位于单独的样式表中（工作正常）。

非常感谢您在解决此事方面提供的任何帮助。

<!-- BEGIN HEADER -->
<!-- <header> -->
  <!-- BEGIN container for HEADER DIV -->
    <!-- BEGIN DIV for top header DIVs -->
    <div id="headerdivs" class="pad-section">
      <div class="container">
        <div class="row-fluid" style="height: 200px;">


          <div class="col-xs-4 text-center" style="background: blue;">
             <p class="lead"></p>
           </div>     

          <div class="col-xs-4 text-center" style="background: red;">
            <div style="position: relative;">
                <span class="logotop"><a href="index.html"><img src="images/logo.png" height="200" width="168" alt="" class="img-responsive" /></a></span>
            </div>
          </div>

          <div class="col-xs-4 text-center" style="background: blue;">
            <p class="lead"></p>
          </div>


        </div>
      </div>
    </div>
    <!-- END DIV for top header DIVs -->
  <!-- END container for HEADER DIV -->
<!-- </header> -->
<!-- END HEADER -->

.logotop {

    position:relative;
    left: 0px;
    bottom: 0px;
    color: white;
    width: 200px;
    max-width: 200px;
    min-width: 200px;
    height: 168px;
    max-height: 168px;
    min-height: 168px;
    z-index:1001;
}

Answer 1

我猜你是否包含Bootstrap CSS的完整且未经编辑的版本 - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css

您遇到的问题是，CSS中有一个声明可确保所有图片都设置为100％，并使用!important覆盖任何其他设置。

img {
    max-width: 100%!important
}

您只包含.logotop类的CSS，并且按照css特异性，img的Bootstrap样式将胜出。

将其作为您的CSS包含在内：

.logotop img {
    //your styles here
}

Bootstrap响应图像的问题

1 个答案: