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>

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

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

很抱歉，如果html的缩进不正确。

Answer 1

首先，您错过了 div 标记以关闭。我想这是你发帖时的错字。

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

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

我猜这是一个，这是创造设计问题。在这里，您将数据绑定到 div ，它位于另一个 div 中，类行，其中所有父项是另一个 div ，类 col-12 。

您只需删除行类并尝试即可。

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

<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/

AngularJS ngBind在小屏幕上混淆了div的布局

1 个答案: