Question

大家好，我目前遇到的Bootstrap问题涉及一列中的html内容和另一列中的图像。

例如我有这个html：

<div class="container-fluid main">
    <div class="row">
        <div class="col-xs-12 col-md-12 col-sm-12 col-lg-5 new-offers-text">
            <h2>The new Tivoli now with half price specification upgrades</h2>
            <ul>
                <li>Half price upgrade from an SE to an EX model - saving <strong>£825</strong></li>
                <li>Half price upgrade from an EX to an ELX – saving <strong>£700</strong></li>

            </ul>
            <p>Offer available until 31st October 2015 and on <strong>petrol engines</strong> only.</p>
            <div class="clear spacer"></div>
            <h3>Tivoli PCP</h3>
            <p>SsangYong Tivoli is now available through a PCP giving you peace of mind.</p>

            <p><strong>And for a limited time only, Tivoli EX petrol manuals purchased through PCP are eligible for 3 years free servicing</strong></p>
            <p>With low monthly payments and SsangYong providing a Guaranteed Future Value for your vehicle you have three options on completion of your contract:</p>
            <ul>
                <li>Option 1 - Pay final payment &amp; keep the car</li>
                <li>Option 2 - Return the car</li>
                <li>Option 3 - Trade in against a new SsangYong</li>
            </ul>
            <p>Talk to us about tailoring a personal quotation to meet your needs.</p>
        </div>
        <div class="col-xs-12 col-md-12 col-sm-12 col-lg-7">
            <img src="/media/wysiwyg/porto/cmspages/ssangyong/tivoli/towing.jpg" class="manufacturer-logo">
        </div>
    </div>
</div>

正如你所看到的，我在col-lg-7中有一个图像，我现在面临的问题是，当页面水平缩小时，我会获得大面积的空白区域，因为内容容器变窄了。 / p>

以下是一个示例：http://puu.sh/kJRsm/86562deefe.jpg

你如何解决这个问题，因为在大屏幕上布局看起来非常精细，只是当容器开始变窄以致白色空间区域变得更大时？

我想我可以通过使col-7 div 100％高度的行和maybes取出img标签并只添加一个带有封面大小属性的css背景来解决这个问题但是我想知道是否有还有其他方法吗？

Answer 1

我认为最好的方法是使用flexbox https://philipwalton.github.io/solved-by-flexbox/demos/grids/并检查Vertically Centered Grid Cells部分。

其他方式是，如果您不必在sm或md大小上显示所有文本，则可以在部分文本上设置hidden-sm或hidden-md，也可以创建一些阅读更多链接或其他内容。有关详细信息，请查看此http://getbootstrap.com/css/#responsive-utilities。

也许第三种方式是你所说的创建div和内部放置该图片并且可能使用

.div {
  overflow: hidden;
}

.div img {
  height: 100%;
  width: auto;
}

//OR

.div {
  background-size: cover;
  background-position: center;
}

也许有更好的方法来做到这一点，我也想了解它，但这些是我知道的选项，我有很多次类似的问题。

Answer 2

有两种方法可以移除空白区域。一种是删除我们用来分隔文本和图像的div，并将图像浮动到右边或左边。给它一个“宽度”和“最大宽度：100％”所以在大屏幕上，它采用图像的宽度，图像将覆盖一个区域，其余的空间将由文本使用。不要记得使用

内部像这样工作。

以下是示例：http://www.w3schools.com/css/tryit.asp?filename=trycss_layout_float

第二个选项是测试所有屏幕尺寸（lg-md-sm-xs）如果将图像设置为12列，则忘记sm＆amp; xs。您必须缩小图像宽度，以便在文本上排列文本。

问候
nabeel

列中的Bootstrap图像大小调整

2 个答案: