Question

我想在这张照片的绿色区域放一个.well div（或任何按钮）：

以下是我的代码：

<div class="container-fluid">

  <div class="row row1" style="height: 400px;">


    <div class="col-lg-4 col-lg-offset-1">

      aaaa <!-- BUTTON OR WELL HERE -->

    </div>

  </div>

的CSS：

.row1 {
    background: url("appart.jpg");
    background-size: 100% 400px;
    background-repeat: no-repeat;
}

问题，如果我尝试这段代码：

<div class="container-fluid">

  <div class="row row1" style="height: 400px;">


    <div class="col-lg-4 col-lg-offset-1">

       <div class="well well-sm">aaa
       </div>

  </div>

我得到了这个结果：

here

如何将.well div放在绿色区域内（其高度和宽度低于绿色区域）？

Answer 1

我不确定你要问的是什么但是......请记住bootstrap col尺寸。如果你使用lg，如果屏幕小于lg大小，它将会混淆。如果你不想宣布其他尺寸，那么最好使用xs。

另外，不要进行内联css。

这是你在找什么？

Fiddle here

HTML：

<div class="container-fluid">

    <div class="row backgroundPicHere">

        <div class="col-xs-4 col-xs-offset-1 green">

            <div class="well">Basic Well</div>

        </div>

    </div>

</div>

CSS：

.backgroundPicHere {
    top: 20px;
    height: 200px;
    background: red;
}

.green{
    background: green;
    height: 200px !important;
}

.green .well{
     position: relative;
     top: 50%;
     transform: translateY(-50%);
}

PS。使用您认为适合井的垂直居中的任何方式。这只是其中之一......有些人可能不赞成。 DS

编辑：更正代码缩进

引导不可能在一个col？

1 个答案: