AngularJS ngBind混淆了小屏幕div的佈局

當我嘗試從使用AngularJS的html模板上的數據庫注入一些文本時，出現了一個非常奇怪的問題。除非您更改爲移動視圖或屏幕非常小，否則一切都很順利。AngularJS ngBind混淆了小屏幕div的佈局

這是我的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的縮進不正確。

來源

2016-06-29 Stefan Idriceanu

首先你錯過了div標籤關閉。我想這只是發佈時的錯字。

即將到來的問題，這與AngularJS無關，因爲這是一個設計問題。

當您使用bootstarp，你不需要內部COL-12類行類。

我猜這是一個，這是創建設計問題。在這裏，您在數據綁定到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/

來源

2016-06-29 14:35:23

我已經刪除了該行的div仍然沒有改變。問題是，如果我手動鍵入{{reviewer.Review}}的長文本，我將得到一個完美響應的佈局。 –

我也嘗試過的做法是從文本區域複製粘貼一些文本，並將其替換爲{{reviewer.Review}}。這導致佈局崩潰。這使我有一些關於文本區域如何格式化實際文本的內容。 –

我可以更好地理解如果我看到代碼的一部分。 –

AngularJS ngBind混淆了小屏幕div的佈局

回答

相關問題