css - Bootstrap 不可能在山坳里放一口井？

Question

我想在这张图片的绿色区域放置一个 .well div(或任何按钮):

here

这是我现在的代码:

<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 列大小。如果你使用 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%);
}

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

编辑:更正代码缩进