Question

我的目标是获得一个类似于以下内容的HTML页面

这是MVCE

function resizeJumbotronToHaveEqualHeights () {
    var elements = $(".js-cap-jumbotron")
    var max_height = _.max(_.map(elements, function (element) { return $(element).height() }))
    _.map(elements, function (element) { $(element).height(max_height) })
}

function positionButtonsTowardsBottom() {
    var buttons = $(".js-cap-jumbotron-bottom")
    _.map(buttons, function(element) {
        var button = $(element)
        var parentContainer = button.parents(".js-cap-jumbotron")
        var siblingContainer = button.siblings(".upper-cap-jumbotron")
        var childContainers = _.toArray(button.parentsUntil(".js-cap-jumbotron"))
        var newTop = $(parentContainer).outerHeight()
        childContainers.forEach(function(container) {
            newTop -= $(container).position().top
        })
        newTop -= button.outerHeight(true);
        newTop -= siblingContainer.outerHeight(true);
        button.css({ "margin-top": newTop + "px" })
    })
}

const onWindowResize = function() {
    const width = $(window).width();
    console.log(width)
    if (width > 992) {
        var elements = $(".js-cap-jumbotron")
        elements.css('height', 'auto');
        resizeJumbotronToHaveEqualHeights()
        positionButtonsTowardsBottom()
    } else {
        var elements = $(".js-cap-jumbotron")
        elements.css('height', 'auto');
        var buttons = $(".js-cap-jumbotron-bottom")
        buttons.css({"margin-top": "auto"})
    }
};

var throttledOnWindowResize = _.throttle(onWindowResize, 100, {leading: false})

window.onresize = function(event) {
    throttledOnWindowResize()
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html class="no-js" lang="">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/main.css">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
            integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
            crossorigin="anonymous"></script>
    <script src="js/main.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="js-cap-jumbotron jumbotron">
                <div class="row js-cap-jumbotron-inside">
                    <div class="col-md-6">
                        <div class="upper-cap-jumbotron">
                            <h3>Lorem Ipsum 1</h3>
                            <p class="cap-jumbotron-paragraph">Lorem ipsum dolor sit amet.</p>
                        </div>
                        <input class="js-cap-jumbotron-bottom" />
                    </div>
                    <div class="col-md-6">
                        <div class="upper-cap-jumbotron">
                            <h3>Lorem Ipsum 2</h3>
                            <p class="cap-jumbotron-paragraph">Text of arbitrary length</p>
                        </div>
                        <button class="js-cap-jumbotron-bottom btn btn-lg btn-default">Submit</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="js-cap-jumbotron jumbotron">
                <div class="js-cap-jumbotron-inside">
                    <div class="upper-cap-jumbotron">
                        <h3>Lorem Ipsum 3</h3>
                        <p class="cap-jumbotron-paragraph">Text of arbitrary length</p>
                    </div>
                    <button class="js-cap-jumbotron-bottom btn btn-lg btn-default">Submit 2</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

正如您通过运行代码段（屏幕宽度为1000px +）所看到的那样，当我调整屏幕大小时，按钮会上下抖动。当我调整屏幕大小并且顶部垂直对齐在jumbotrons底部附近时，我希望按钮不会摇晃。我想有一些优雅的CSS解决方案。我会很感激任何提示。

Answer 1

我不确定你的目标是什么，但是使用Bootstrap的网格布局可以实现两个一个按钮和另一个按钮的两个按钮。

<div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="jumbotron">
                <div class="row">
                    <div class="col-md-6"><p>Text</p></div>
                    <div class="col-md-6"><p>Text</p></div>
                </div>
                <div class="row">
                    <div class="col-md-6"><p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p></div>
                    <div class="col-md-6"><p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p></div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="jumbotron">
                <p>Text</p>
                <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
            </div>
        </div>
    </div>

</div>

再一次编辑

Answer 2

JS Fiddle Demo

<强> HTML：

<div class="container">
  <div class="row">
    <div class="col-md-8">
      <div class="js-cap-jumbotron jumbotron">
        <div class="row js-cap-jumbotron-inside">
          <div class="col-md-6">
            <div class="upper-cap-jumbotron">
              <h3>Lorem Ipsum 1</h3>
              <p class="cap-jumbotron-paragraph">Lorem ipsum dolor sit amet.</p>
            </div>
            <input class="js-cap-jumbotron-bottom" />
          </div>
          <div class="col-md-6">
            <div class="upper-cap-jumbotron">
              <h3>Lorem Ipsum 2</h3>
              <p class="cap-jumbotron-paragraph">Text of arbitrary length</p>
            </div>
            <button id="submit1" class="js-cap-jumbotron-bottom btn btn-lg btn-default">Submit</button>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="js-cap-jumbotron jumbotron">
        <div class="js-cap-jumbotron-inside">
          <div class="upper-cap-jumbotron">
            <h3>Lorem Ipsum 3</h3>
            <p class="cap-jumbotron-paragraph">Text of arbitrary length</p>
          </div>
          <button id="submit2" class="js-cap-jumbotron-bottom btn btn-lg btn-default">Submit 2</button>
        </div>
      </div>
    </div>
  </div>
</div>

<强> CSS：

@media only screen and (min-width: 992px) {
  #submit1 {
    margin-top: 7%;
  }
  #submit2 {
    margin-top: -8%;
  }
}

<强> JS：

function resizeJumbotronToHaveEqualHeights() {
  var elements = $(".js-cap-jumbotron")
  var max_height = _.max(_.map(elements, function(element) {
    return $(element).height()
  }))
  _.map(elements, function(element) {
    $(element).height(max_height)
  })
}

function positionButtonsTowardsBottom() {
  var buttons = $(".js-cap-jumbotron-bottom")
  _.map(buttons, function(element) {
    var button = $(element)
    var parentContainer = button.parents(".js-cap-jumbotron")
    var siblingContainer = button.siblings(".upper-cap-jumbotron")
    var childContainers = _.toArray(button.parentsUntil(".js-cap-jumbotron"))
    var newTop = $(parentContainer).outerHeight()
    childContainers.forEach(function(container) {
      newTop -= $(container).position().top
    })
    newTop -= button.outerHeight(true);
    newTop -= siblingContainer.outerHeight(true);
    button.css({
      "margin-top": newTop + "px"
    })
  })
}

const onWindowResize = function() {
  const width = $(window).width();
  console.log(width)
  if (width > 992) {
    var elements = $(".js-cap-jumbotron")
    elements.css('height', 'auto');
    resizeJumbotronToHaveEqualHeights()
    positionButtonsTowardsBottom()
  } else {
    var elements = $(".js-cap-jumbotron")
    elements.css('height', 'auto');
    var buttons = $(".js-cap-jumbotron-bottom")
    buttons.css({
      "margin-top": "auto"
    })
  }
};

var throttledOnWindowResize = _.throttle(onWindowResize, 100, {
  leading: false
})

window.onresize = function(event) {
  throttledOnWindowResize()
};

Answer 3

请试试这个，这对你有帮助..

不需要script.CSS足以实现。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html class="no-js" lang="">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/main.css">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
            integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
            crossorigin="anonymous"></script>
    <script src="js/main.js"></script>
   <style type="text/css">
      .js-cap-jumbotron.jumbotron{
        min-height: 300px;
        padding: 28px;
        height: auto;
      }
  .height100per{
    height:100%;
  }
  body {
    margin: 0;
    padding: 20px;
}

   </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-8 col-sm-8 col-xs-8">
            <div class="js-cap-jumbotron jumbotron" style="">
                <div class="row js-cap-jumbotron-inside height100per">
                    <div class="col-md-6 col-md-6 col-sm-6 col-xs-6 height100per" style="">
                        <div class="upper-cap-jumbotron">
                            <h3>Lorem Ipsum 1</h3>
                            <p class="cap-jumbotron-paragraph">Lorem ipsum dolor sit amet.</p>
                        </div>
                        <input class="js-cap-jumbotron-bottom" style="position: absolute; bottom: 0px; margin-top: auto;">
                    </div>
                    <div class="col-md-6 col-md-6 col-sm-6 col-xs-6 height100per">
                        <div class="upper-cap-jumbotron height100per">
                            <h3>Lorem Ipsum 2</h3>
                            <p class="cap-jumbotron-paragraph">Text of arbitrary length</p>
                        </div>
                        <button class="js-cap-jumbotron-bottom btn btn-lg btn-default" style="margin-top: auto; position: absolute; bottom: 0px;">Submit</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-md-4 col-sm-4 col-xs-4">
            <div class="js-cap-jumbotron jumbotron" style="">
                <div class="row js-cap-jumbotron-inside height100per">
                <div class="col-md-12 col-md-12 col-sm-12 col-xs-6 height100per">
                    <div class="upper-cap-jumbotron">
                        <h3>Lorem Ipsum 3</h3>
                        <p class="cap-jumbotron-paragraph">Text of arbitrary length</p>
                    </div>
                    <button style="margin-top: auto; position: absolute; bottom: 0px;" class="js-cap-jumbotron-bottom btn btn-lg btn-default">Submit 2</button>
                </div>
</div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Answer 4

以下是仅限Css解决方案：

@media screen and (min-width: 992px) {
    body {
      padding-top: 30px;
    }
    .jumbotron-area {
      margin-bottom: 30px;
      position: relative;
    }
    .jumbotron-area .jumbotron {
      padding-bottom: 70px;
      background: none;
      margin-bottom: 0;
    }
    .jumbotron-area [class^='col-md'] {
      position: static;
    }
    .jumbotron-area .jumbotron:before {
      width: calc(66.66666667% - 30px);
      background-color: #eee;
      position: absolute;
      border-radius: 6px;
      margin-left: -60px;
      z-index: -1;
      content: '';
      bottom: 0;
      top: 0;
    }
    .jumbotron-area .col-md-4 .jumbotron:before {
      width: calc(33.33333333% - 30px);
    }
    .jumbotron-area .jumbotron-bottom {
      position: absolute;
      bottom: 20px;
    }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row jumbotron-area">
        <div class="col-md-8">
            <div class="js-cap-jumbotron jumbotron">
                <div class="row js-cap-jumbotron-inside">
                    <div class="col-md-6">
                        <div class="upper-cap-jumbotron">
                            <h3>Lorem Ipsum 1</h3>
                            <p class="cap-jumbotron-paragraph">Lorem ipsum dolor sit amet.</p>
                        </div>
                        <div class="jumbotron-bottom">
                            <input type="text" />
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="upper-cap-jumbotron">
                            <h3>Lorem Ipsum 2</h3>
                            <p class="cap-jumbotron-paragraph">Text of arbitrary lengthText of arbitrary lengthText of arbitrary lengthText of arbitrary lengthText of arbitrary lengthText of arbitrary lengthText of arbitrary </p>
                        </div>
                        <div class="jumbotron-bottom">
                            <button class="btn btn-lg btn-default">Submit</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="js-cap-jumbotron jumbotron">
                <div class="js-cap-jumbotron-inside">
                    <div class="upper-cap-jumbotron">
                        <h3>Lorem Ipsum 3</h3>
                        <p class="cap-jumbotron-paragraph">Text of arbitrary length</p>
                    </div>
                    <div class="jumbotron-bottom">
                        <button class="btn btn-lg btn-default">Submit 2</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="row jumbotron-area">
        <div class="col-md-8">
            <div class="js-cap-jumbotron jumbotron">
                <div class="row js-cap-jumbotron-inside">
                    <div class="col-md-6">
                        <div class="upper-cap-jumbotron">
                            <h3>Lorem Ipsum 1</h3>
                            <p class="cap-jumbotron-paragraph">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
                        </div>
                        <input type="text" />
                    </div>
                    <div class="col-md-6">
                        <div class="upper-cap-jumbotron">
                            <h3>Lorem Ipsum 2</h3>
                            <p class="cap-jumbotron-paragraph">Text of arbitrary length Text of arbitrary length Text of arbitrary length Text of arbitrary length Text of arbitrary length Text of arbitrary length </p>
                        </div>
                        <div class="jumbotron-bottom">
                            <button class="btn btn-lg btn-default">Submit</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="js-cap-jumbotron jumbotron">
                <div class="js-cap-jumbotron-inside">
                    <div class="upper-cap-jumbotron">
                        <h3>Lorem Ipsum 3</h3>
                        <p class="cap-jumbotron-paragraph">Text of arbitrary length Text of arbitrary length Text of arbitrary length Text of arbitrary length Text of arbitrary length Text of arbitrary length Text of arbitrary length </p>
                    </div>
                    <div class="jumbotron-bottom">
                        <button class="js-cap-jumbotron-bottom btn btn-lg btn-default">Submit 2</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

注意：我添加了仅适用于992px以上的样式，但您可以根据需要自定义样式。请以完整页面模式查看此演示。

对齐三个按钮，使它们位于两个Bootstrap Jumbotron容器的底部

4 个答案: