AngularJS ngBind 弄乱了小屏幕上 div 的布局

Question

在尝试使用 AngularJS 在 html 模板上注入数据库中的一些文本时，我遇到了一个非常奇怪的问题。在您切换到移动视图或屏幕非常小之前，一切看起来都很好。

这是我的 html 模板：

<div class="col-12">
<div class="panel panel-white no-radius">
   <div class="panel-heading border-bottom">
      <h4 class="panel-title">Review</h4>
   </div>
   <div class="panel-body padding-left-20 padding-right-20">    
       <div ng-repeat="reviewer in reviewers">
         <div class="row">
             <a href="#" class="pull-left"> <img alt="image" class="img-circle" src="assets/images/avatar-2.jpg"> </a>
             <strong>{{reviewer.FirstName}} {{reviewer.LastName}}</strong>
         </div>
         <div class="row">
           <div class="well" style="height: 100px; overflow:auto; word-wrap:break-word;" >
             {{reviewer.Review}}
           </div>
         </div>
       </div>
   </div>
   <div class="panel-footer" ng-if='rate'>
                Please leave <strong>{{name}}</strong> a review:
     <textarea class="form-control" ng-model='review' maxlength="900" style="resize:vertical;" rows="3"></textarea>
     <button ng-if='rate' class="btn btn-primary btn-xs margin-top-3" ng-click="leaveReview(review)">Leave review</button>
  </div>
 </div>

页脚上的文本区域是我将评论添加到数据库中的方式。 我发现如果我只是在 html 文件中插入一些文本，那么布局是完美的，但是当我想使用 ngBind 时，文本会强制 div 在小屏幕上具有更大的宽度。 （仅在较小的屏幕上，即使在调整大小时）

我想 textarea 会在输入中添加一些隐藏字符，而不是弄乱我的 div。 （可能是换行符或类似的东西？）

如果html的缩进不对，请见谅。

Answer 1

首先你错过了 div 标签来关闭。我想这只是您发布此内容时的拼写错误。

谈到这个问题，这与 AngularJS 无关，因为这是一个设计问题。

当您使用 bootstarp 时，您不需要 col-12 类中的 row 类。

我猜那是一个，它正在制造设计问题。在这里，您将数据绑定到 div，该 div 位于另一个 div 内，类 row，其所有父级是另一个 div 类 col-12。

您可以简单地删除 row 类并尝试一下。

查看此链接以获得更好的想法，其中布局突出显示了红色和绿色。

<div class="row">
 <div class="col-sm-4" style="background-color:red">
  <h3>Column 1</h3>
     <div class='row'>
        <div  style="background-color:green">This is with "row" inside "colomn grid". This is with "row" inside "colomn grid". This is with "row" inside "colomn grid". This is with "row" inside "colomn grid". This is with "row" inside "colomn grid".</div>
     </div>
 </div>
 <div class="col-sm-4" style="background-color:red">
  <h3>Column 2</h3>
     <div  style="background-color:green">This is without "row" inside "colomn grid". This is without "row" inside "colomn grid". This is without "row" inside "colomn grid". This is without "row" inside "colomn grid". This is without "row" inside "colomn grid". </div>
 </div>
 </div>
 <div class="col-sm-4">
  <h3>Column 3</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>

https://jsfiddle.net/qh5n27bx/