带引导程序的最大高度和水平显示答案

【问题标题】：Max-height and horizontal display with bootstrap带引导程序的最大高度和水平显示
【发布时间】：2013-12-18 01:17:12
【问题描述】：

我正在尝试使用 Bootstrap 和个人 CSS 文件调整我的 Angular 模板的样式。

<!-- index.html -->
<div static-include="partial/example.html"></div>

这里，static-include 是我在 Stack Overflow 上找到的一个指令，用于不创建子作用域。

<!-- example.html -->
<div class="well">
    <h6>Listes</h6>
    <div ng-repeat="column in lists">
        <dt>{{ column.name }}</dt>
        <dd ng-repeat="term in column">{{ term }}</dd>
    </div>
</div>

根据使用的$scope，div的大小会发生变化：

但我希望能够指定最大高度。 max-height 的问题是只有井的大小会发生变化：

我能做些什么来声明一个最大高度，例如，如果“Gratuite”超出了，它会在右边？

编辑：像这样：

PS：我很抱歉我表达问题的方式，但我缺乏技术词汇。

PS2：最后一张图片是ps过的，我没有答案。

谢谢

【问题讨论】：

使用 jsfiddle 会更容易 - 但是您是否在 well 上尝试过 overflow: auto？
如果您只想滚动列，则为从属元素。
尝试在井中的列周围放置一个 .row
overflow:auto 只是添加了一个滚动条，我编辑了问题添加了一张图片，可能会给你一个更好的主意。此外，添加 .row 不起作用 =/
我认为您可能正在寻找类似这样的东西 -> masonry.desandro.com 这个库将允许您在给定容器内将元素浮动到右侧。祝你好运！

标签： css angularjs twitter-bootstrap

【解决方案1】：

我试图创建一个小提琴来复制您的条件。也许你可以分叉这个并给我们一个更好的例子来说明你试图解释的场景？

http://jsfiddle.net/rodhartzell/2AgC4/3/

HTML

<body ng-app="myApp">
        <div ng-controller="MyCtrl">
            <div class="well">
                 <h6>Listes</h6>
                <dl ng-repeat="column in lists"> 
                    <dt>{{ column.name }}</dt>
                    <dl ng-repeat="num in column.term">{{num}}</dl>
                </dl>
            </div>

        </div>
    </body>

JavaScript

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {

    $scope.lists =  [{
            "name": "Peremntion",
            "term": [2, 5, 9, 0, 11, 0, 0]
        }, {
            "name": "column 2",
            "term": [2, 5, 9, 0, 11, 0, 0]
        }];
}

【讨论】：

对不起，我不能让你的小提琴工作 =/ 我得到的唯一输出是 Listes {{ column.name }} {{ term }}