css - 带 Bootstrap 的最大高度和水平显示

标签 css angularjs twitter-bootstrap

我正在尝试使用 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 的大小会发生变化:

View 1

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

View 2

我可以做些什么来声明最大高度,例如,如果“Gratuite”超出,它会在右边?

编辑:像这样: enter image description here

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

PS2:最后一张图片是photoshop过的,我没有答案。

谢谢

最佳答案

我试图创建一个 fiddle 来复制您的条件。或许您可以 fork 这个并为我们提供一个更好的示例来说明您正在尝试解释的场景?

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]
        }];
}

关于css - 带 Bootstrap 的最大高度和水平显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20615612/

相关文章:

css - td 宽度不工作 - 不知道为什么

javascript - 如何在输入类型 Number 中屏蔽 +、-、e?

javascript - 在 html 中重定向后如何保留输入值?

javascript - 如何使用bootstrap或js创建动态数据表?

jquery - 如何在 Bootstrap 中有一个固定的列?

asp.net - 在 ASP.NET 中,我将如何将屏幕分成四个相等的矩形?

javascript - 传单 map : marker's smooth transition opacity change

javascript - 从 AngularJS 站点的 MySQL 数据库插入和检索数据

javascript - 单击时 Bootstrap 警报关闭

html - 两个元素并排在外部 div 中,一个在左侧,一个在右侧