Question

我正在渲染一些按钮，其中一些按钮的标题可能很长，所以我将文本包装在所有按钮中。（使用style =“white-space：normal”）

问题： 我需要将按钮高度调整为完全相同，在我的情况下，长文本按钮的高度与其余高度不同。

我的HTML

<div class="container">
<div class="row">
    <div ng-repeat="b in data" class="col-sm-4 col-lg-4 col-md-4 col-sm-4" style="text-align:center;">
        <button type="button" class="btn btn-primary btn-block" style="white-space:normal">{{b.caption}}</button>
    </div>
</div>
<div>

控制器：

export const test1 = {
template: require('./app.html'),
controller($scope, $http) {

         $scope.hello =  "hello app";
         $scope.data = [] ;

          $http.get("sampledata.json").then((response) =>
            {
               $scope.data = response.data ;
            });

}

};

Sampledata.json

[
    { "caption": "My Button text 1" },
    { "caption": "My Button text 2" },
    { "caption": "My Button text 3" },
    { "caption": "My Button text 4" },
    {"caption": "My Button text which has many words and should wrap" },
    { "caption": "My Button text" }
]

Index.js

import angular from 'angular';
import {ngAnimate} from 'angular-animate';
import {ngSanitize} from 'angular-sanitize';
import 'angular-ui-bootstrap';

import 'angular-ui-router';
import routesConfig from './routes';

import {test01} from './test1/app';

import './index.scss';

export const app = 'app';

angular
  .module(app, ['ngAnimate', 'ngSanitize','ui.router', 'ui.bootstrap'])
  .config(routesConfig)
  .component('app', hello)
  .component('test1', test1)

的index.html

<!doctype html>
<html>
  <head>
    <base href="/">
    <meta charset="utf-8">
    <title>FountainJS</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" type="text/css" href="./vendor/bootstrap.min.css">

  </head>

  <body ng-app="app">
    <ui-view></ui-view>
  </body>
</html>

angularjs指令调整大小

0 个答案: