Javascript 让bootstrap cols在angular ng show中发挥出色

我有三列相同宽度的col-md-4，但是中间的一列设置了ng show，有时不会显示。现在，当朋友请求进来，最右边的科尔-MD—4出现时，中间部分仍然隐藏在中间。如何使中间的col-md-4聊天窗口即使隐藏也能占用空间

<div class="row">

  <div class="col-md-4 friendListWindow" ng-init="getFriends()">
    Friends List
    <form ng-submit='addFriend(username)' name='addFriendForm'>
      <input type='text' name='username' ng-model='username' required/>
      <input type='submit' ng-disabled='!addFriendForm.$valid' value='Add Friend'>
    </form>
    Online Friends
    <ul>
      <span ng-repeat='friend in friends track by $index | orderBy:"name"' ng-click='startChat(friend)'>
        <li ng-if='friend.online'>
          <span class='friendService'>{{friend.service}}</span>
          <span class='friendName'>{{friend.name}}</span>
        </li>
      </span>
    </ul>
  </div>


  <div class="col-md-4 chatWindow" ng-show="activeFriend">
    <div class="activeFriendBox">Chat with {{activeFriend.name}}</div>

    <div class="messages">
      <div ng-repeat='message in activeFriend.messages track by $index | orderBy:"timeStamp"'>
        <span>{{message.from}}</span>
        <span>{{message.message}}</span>
        <span>{{message.timestamp}}</span>
      </div>
    </div>

    <div class="sendMessage">
      <form ng-submit='sendMessage(messageText)' name='messageForm'>
        <input type='text' name='message' ng-model='messageText' required/>
        <input ng-disabled='!messageForm.$valid' type='submit' value='send'/>
      </form>
    </div>
  </div>

  <div class="col-md-4 friendRequestsWindow">
    <div class="friendRequests">
      <ul>
        <li ng-repeat='friend in friendRequests track by $index'>
          <span>New friend Request from: {{friend}}</span>
          <button ng-click='acceptFriendRequest(friend)'>Accept</button>
          <button ng-click='ignoreFriendRequest(friend)'>Ignore</button>
        </li>
      </ul>
    </div>

    <div class="acceptedFriendRequests">
      <ul>
        <li ng-repeat='friend in acceptedfriendRequests track by $index'>
          <span>{{friend}} accepted your friend request</span>
          <button ng-click='acknowledgeFriendRequest($index)'>Acknowledge</button>
        </li>
      </ul>
    </div>
  </div>

</div>

好友列表
网友


{{friend.service}
{{friend.name}


与{{activeFriend.name}聊天
{{message.from}
{{message.message}
{{message.timestamp}


新好友请求来自：{{friend}
接受
忽略




{{friend}}已接受您的好友请求
承认

您可以在col内容中使用ng show，而不是col本身

而不是

<div class="col-md-4" ng-show="xxx">content</div>

内容

使用

内容

放入内部div，并在其中使用ng show，例如

…

谢谢，这非常简单，应该想到这一点

<div class="col-md-4">
    <div ng-show="xxx">content</div>
</div>