Question

我正在为我的应用构建网络信息中心。它动态加载不同的模块并将它们放在Bootstrap容器中。这些模块可以具有可变高度，当浏览器窗口足够窄时，它们可以垂直堆叠。这就是我想要的。

问题在于更高的分辨率。我想将它们分成3列，所以我把每个面板都放在<div class="col-sm-4">里面如果我们只有3个面板，它的效果很好。第四，我们得到这样的东西：

我搜索了其他方法，发现有人提议删除<div class="col-sm-4"> 所以我做得不好结果：

唯一可行的方法是手动将面板添加到其中一列。

这产生了预期的结果，但需要更多的JS逻辑来运行。我需要计算我有多少面板并选择合适的色谱柱。这是唯一的出路还是我错过了什么？谢谢！

已编辑 - 我当然忘记包含代码了。

    <!DOCTYPE html>
<html lang="en">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    </head>
<body>

<div class="container">

  <div class="page-header">
    <h1>Stack test</h1>
    <p class="lead"></p>
  </div>

  <!--<div class="row">-->
    <div class="col-sm-4">
      <div id="panel_control_manual" class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Panel 1</h3>
        </div>
        <div class="panel-body">
          I miss panel 4 so much :(
        </div>
      </div>
    </div>

    <div class="col-sm-4">
      <div id="panel_control_manual" class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Panel 2</h3>
        </div>
        <div class="panel-body">
          Panel content
        </div>
      </div>
    </div>

    <div class="col-sm-4">
      <div id="panel_control_manual" class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Panel 3</h3>
        </div>
        <div class="panel-body">
          Such panel. Much content. Wow.
          <br/><br/><br/><br/><br/><br/><br/>
          <br/><br/><br/><br/><br/><br/><br/>
          <br/><br/><br/><br/><br/><br/><br/>
          End of long content.

        </div>
      </div>
    </div>

    <div class="col-sm-4">
      <div id="panel_control_manual" class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Panel 4</h3>
        </div>
        <div class="panel-body">
          I don't want to have that much space above me!
        </div>
      </div>
    </div>

</div> <!-- /container -->

</body>
</html>

Answer 1

尝试稍微更改现有布局，例如here。

<强> CODE：

<div class="container">

    <div class="page-header">
        <h1>Stack test</h1>
        <p class="lead"></p>
    </div>

    <div class="row">
        <div class="col-sm-4">
            <div id="panel_control_manual" class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Panel 1</h3>
                </div>
                <div class="panel-body">
                    I miss panel 4 so much :(
                </div>
            </div>                
            <div id="panel_control_manual" class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Panel 4</h3>
                </div>
                <div class="panel-body">
                    I don't want to have that much space above me!
                </div>
            </div>
        </div>           

        <div class="col-sm-4">
            <div id="panel_control_manual" class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Panel 2</h3>
                </div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>
        </div>

        <div class="col-sm-4">
            <div id="panel_control_manual" class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Panel 3</h3>
                </div>
                <div class="panel-body">
                    Such panel. Much content. Wow.
                    <br /><br /><br /><br /><br /><br /><br />
                    <br /><br /><br /><br /><br /><br /><br />
                    <br /><br /><br /><br /><br /><br /><br />
                    End of long content.

                </div>
            </div>
        </div>
    </div>
</div>

Answer 2

这是一个很大的问题。我认为要这样做，你必须使用masonary js.

Answer 3

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    </head>
<body>

<div class="container">

  <div class="page-header">
    <h1>Stack test</h1>
    <p class="lead"></p>
  </div>

  <div class="row">
    <div class="col-lg-3 col-sm-3 col-xs-3">
      <div id="panel_control_manual" class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">This is 1</h3>
        </div>
        <div class="panel-body">
          I miss panel 4 so much :( :)
        </div>
      </div>
    </div>

    <div class="col-lg-3 col-sm-3 col-xs-3">
      <div id="panel_control_manual" class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">This is 2</h3>
        </div>
        <div class="panel-body">
          Panel content
        </div>
      </div>
    </div>

    <div class="col-lg-3 col-sm-3 col-xs-3">
      <div id="panel_control_manual" class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Panel 3</h3>
        </div>
        <div class="panel-body">
          Such panel. Much content. Wow.
          <br/><br/><br/><br/><br/><br/><br/>
          <br/><br/><br/><br/><br/><br/><br/>
          <br/><br/><br/><br/><br/><br/><br/>
          End of long content.

        </div>
      </div>
    </div>

    <div class="col-lg-3 col-sm-3 col-xs-3">
      <div id="panel_control_manual" class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">This is 4</h3>
        </div>
        <div class="panel-body">
          I don't want to have that much space above me!
        </div>
      </div>
    </div>
  </div>

</div> <!-- /container -->

</body>
</html>

This is Result

在行

3 个答案: