Question

我正在使用bootstrap的popover，但我不希望popover溢出它的包装器，任何想法？

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.angularjs.org/1.5.5/angular.js" data-semver="1.5.5" data-require="angularjs@1.5.5"></script>
  <script data-require="ui-bootstrap@*" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script>
  <script data-require="bootstrap.js@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" data-semver="3.3.6" data-require="bootstrap-css@*" />
  <script src="controller.js"></script>
  <script id="calendar.html" type="text/ng-template">
    <uib-datepicker ng-model="date" show-weeks="false">
      </datepicker>
  </script>
  <link rel="stylesheet" href="main.css">
  <link rel="stylesheet" href="popover.css">
</head>


<body>
  <div ng-app="my-app" ng-controller="controller">
    <div class="card">
    <div class="card-panel">
    <div class="card-body">
    <div class="row">
    <p>BAbababababbabababababababababababababbabaabbabaabababbBAbababababbabababababababababababababbabaabbabaabababbBAbababababbabababababababababababababbabaabbabaabababb</p>
    </div>
    </div>
    </div>
    </div>
    <div class="card">
      <div class="card-panel">
        <div class="card-body">
          <div class="row">
            <div class="col-xs-12" style="text-align:center;">
              <h2>Here is a list a weapons</h2>
            </div>
          </div>
          <div class="row" ng-repeat="item in weaponItems">
            <div class="col-xs-12">
              <div class="col-xs-6" ng-click="selectItem(item)" uib-popover-template="'popover.html'" popover-is-open="isOpen && item === selectedItem" popover-trigger="click" popover-placement="auto right">
                <div class="panel">
                  <div class="panel-body" style="min-height:120px;">
                    <div><b>Category:</b>&nbsp;{{item.title}}</div>
                    <p><b>Desc:</b>&nbsp;{{item.desc}}</p>
                  </div>
                </div>
              </div>
              <div class="col-xs-6">
                <div class="panel" style="text-align:center;">
                  <img src="{{item.img}}" height="120px" width="auto">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</body>

</html>

我想我的问题并不清楚，请看附图红线包围的区域是卡片面板区域，绿线包围的是popover。在这里，我不希望弹出超出面板区域。

Answer 1

在溢出元素上声明word-wrap。

.card-body p{
  word-wrap: break-word;
}

我可以阻止它的包装器中的bootstrap popover溢出吗？

1 个答案: