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クラスの中行クラスは必要ありません。

私はそれがデザイン上の問題を引き起こしていると推測しています。ここでは、そのすべての親を超えるクラスCOL-12を持つ別ののdivあるクラス行、と別ののdivの内側にあるのdivにデータをバインドしています。

行クラスを削除して試してみてください。

レイアウトが赤と緑の色で強調表示されている場合は、このリンクをクリックしてください。

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