Bootstrap 3标记

Question

你可以帮助我，我可以如何实施以下内容。 这是我的html标记：

<div class="container-fluid">
<div class="row">
    <div class="hidden-xs col-sm-3 col-md-2">
        <!--Navigation-->
        ...
    </div>
    <div class="col-xs-12 col-sm-9 col-md-10">
        <img class="img-responsive" id="bg" src="img/about-us.jpg">
    </div>
</div>

我需要第二个div中的图像为这个div的实心背景（没有滚动，图像应该总是居中）。

Answer 1

由于bootstrap 3有一个用于居中列的类

<div class="col-xs-12 col-sm-9 col-md-10 centered"> <img class="img-responsive" id="bg" src="img/about-us.jpg"> </div>

Answer 2

只需在第二个div中添加一个类或id标记，然后使用css将其与图像链接。像这样：

HTML：

<div class="container-fluid"> <div class="row"> <div class="hidden-xs col-sm-3 col-md-2"> ... </div> <div class="col-xs-12 col-sm-9 col-md-10" id="img-box"></div> </div>

CSS：

#img-box { background-image: url(../img/about-us.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; }

Answer 3

<div class="container-fluid">
    <div class="row">
        <div class="hidden-xs col-sm-3 col-md-2">
        ...
        </div>
    <div class="col-xs-12 col-sm-9 col-md-10" id="img-div"></div>
</div>

#img-div{
background-image: url(img/about-us.jpg);
background-position: center center;
background-size: cover;
}