Question

在这个plunk中，我有一个包含表格的Angular UI模式。我想在表格边框和模态边框之间添加边距，但在css中声明padding元素不起作用。怎么做到这一点？

另外，我需要根据内容宽度自动扩展模态宽度。这可能吗？

HTML

    <style>
      .app-modal .modal-dialog {
          min-width: 260px;
          padding: 10px;
        }
    </style>

    <script type="text/ng-template" id="myModalContent.html">

    <div class="modal-header">
        <h4 class="modal-title">The Title</h4>
    </div>

    <table border="1" style="width:100%">
      <tr>
        <td>aaa</td>
        <td>111</td>
      </tr>
      <tr>
        <td>bbb</td>
        <td>222</td>
      </tr>
      <tr>
        <td>ccc</td>
        <td>333</td>
      </tr>
    </table>

 </script>

使用Javascript：

var app = angular.module('app', ['ui.bootstrap']);
app.controller('ctl', function ($scope,$uibModal) {

          $scope.modalInstance = $uibModal.open({
              templateUrl: 'myModalContent.html',
              windowClass: 'app-modal',
            }); 


});

Answer 1

将填充添加到类 .modal-content 而不是

.app-modal .modal-content{
   padding: 10px;
}

向Angular UI模式添加填充

1 个答案: