Bootstrap 3列在加载页面时根据窗口大小更改大小

Question

I have an issue with my bootstrap site regarding resizing the 3 horizontal columns depending on the window size when the page is loaded. 我的引导站点存在有关在加载页面时根据窗口大小调整3个水平列大小的问题。

I have a script that will adjust the 3 columns to the height of the largest one so that they are even when the page is resized. 我有一个脚本，可以将3列调整为最大列的高度，以便即使在调整页面大小时也是如此。 This works fine if the user loads the page from a large viewport or full screen. 如果用户从大视口或全屏加载页面，这将很好地工作。 However, if they load the page in a smaller window which loads the collapsed layout, then choose to expand the window the columns are smaller than the text. 但是，如果他们将页面加载到较小的窗口中，该窗口将加载折叠的布局，则选择扩展窗口，使列小于文本。 Refreshing the window obviously fixes it. 刷新窗口显然可以解决问题。

Take a look at the below JSFiddle and resize the window and re-run the scipt at a larger window size to see it work as intended. 看一下下面的JSFiddle，调整窗口大小，然后以更大的窗口大小重新运行scipt，以查看其是否按预期工作。

https://jsfiddle.net/ycs9psr3/1/ https://jsfiddle.net/ycs9psr3/1/

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Testing</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet"          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">    </script>

<style>

    .well {
        background-color: #b2dcf7;
        border-radius: 10px;
    }

    .well > img {
        margin-bottom: 30px;
    }

    .well > h4, .well > p {
        color: #16405b;
    }

    .container {
        background-color: white;
        border-width: 0px 1px;
        box-shadow: 0px 3px 20px grey;
    }

    body {
        background-color: #f6f6f6;
        font-family: Verdana;
        min-width: 540px;
    }
</style>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-4 text-center">
            <div class="well well-sm">
                <img src="Images/example.svg" alt="Example" width="128"   height="128">
                <h4>Box 1</h4>
                <p>How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this </p>
            </div>
        </div>
        <div class="col-md-4 text-center">
            <div class="well well-sm">
                <img src="Images/example.svg" alt="Example" width="128" height="128">
                <h4>Box 2</h4>
                <p>How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this </p>
            </div>
        </div>
        <div class="col-md-4 text-center">
            <div class="well well-sm">
                <img src="Images/example.svg" alt="Example" width="128" height="128">
                <h4>Box 3</h4>
                <p>How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this </p>
            </div>  
        </div>  
    </div> 
</div>

<script>
$( window ).resize(function() {
    var heights = $(".well").map(function() {
        return $(this).height();
    }).get(),b

    maxHeight = Math.max.apply(null, heights);

    $(".well").height(maxHeight);
});
</script>

</body>
</html>

Any help appreciated. 任何帮助表示赞赏。

Answer 1

您只使用class="col-md-4 。为了使其在小屏幕上也能正常工作，您需要使用所有响应类class="col-md-4 col-sm-4 col-xs-4 。

Answer 2

I have modified your fiddle to include a CSS only version. 我已经修改了您的小提琴，使其包括仅CSS版本。 You don't need any javascript in order keep similar height columns in bootstrap. 您不需要任何JavaScript即可在引导程序中保留相似的高度列。 See this in action over here: https://jsfiddle.net/ycs9psr3/2/ 在此处查看此操作： https : //jsfiddle.net/ycs9psr3/2/

Related: 有关：

Same height columns with bootstrap (various ways) 带有引导程序的相同高度的列（多种方式）
Previous stack overflow discussion regarding column margins in bootstrap 先前有关引导程序中列裕度的堆栈溢出讨论

  body { background-color: #f6f6f6; font-family: Verdana; min-width: 540px; } .container { background-color: white; } .sameSize { display: flex; flex-wrap: wrap; } .sameSize > div[class*='col-'] { display: flex; flex-direction: column; background-color: #b2dcf7; background-clip: padding-box; border: 10px solid transparent; border-radius: 20px; } .well { background-color: #b2dcf7 !important; border:none !important; } .well > img { margin-bottom: 30px; } .well > h4, .well > p { color: #16405b; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row sameSize"> <div class="col-md-4 text-center"> <div class="well well-sm"> <img src="Images/example.svg" alt="Example" width="128" height="128"> <h4>Box 1</h4> <p>How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this </p> </div> </div> <div class="col-md-4 text-center"> <div class="well well-sm"> <img src="Images/example.svg" alt="Example" width="128" height="128"> <h4>Box 2</h4> <p>How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this </p> </div> </div> <div class="col-md-4 text-center"> <div class="well well-sm"> <img src="Images/example.svg" alt="Example" width="128" height="128"> <h4>Box 3</h4> <p>How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this </p> </div> </div> </div> </div>

Bootstrap 3列在加载页面时根据窗口大小更改大小

问题描述

2 个解决方案

解决方案1
0 2017-02-23 18:57:23

解决方案2
0 已采纳 2017-02-23 19:03:50

Bootstrap 3列在加载页面时根据窗口大小更改大小

问题描述

2 个解决方案

解决方案1 0 2017-02-23 18:57:23

解决方案2 0 已采纳 2017-02-23 19:03:50

解决方案1
0 2017-02-23 18:57:23

解决方案2
0 已采纳 2017-02-23 19:03:50