使用Bootstrap在ng-show之后进行Div移位

Question

我有以下内容：

当我点击右边的图片时，我得到以下内容：

两个方框应该对齐，就像第一张图片一样。

包含div如下：

<div align="center" class="top-buffer">
    <div class="img-thumbnail">
      <img id="face-img" class="search-face" ng-src="{{faceImg}}">
    </div>
    <div class="overlaid img-thumbnail">
      <img id="face-img" class="search-face" ng-src="{{processedResults[selectedSearchResultIndex].img}}" ng-hide="showSearchResultDetails" ng-click="toggleSearchResultDetails()">

      <div class="search-face wrapword" ng-show="showSearchResultDetails" ng-click="toggleSearchResultDetails()">
        Name: <strong>{{processedResults[selectedSearchResultIndex].name}}</strong>
      </div>

      <span class="glyphicon glyphicon-info-sign overlayer text-primary" aria-hidden="true"></span>
    </div>
  </div>

自定义CSS如下：

.search-face {
    width: 100px;
    height: 100px;
}

.overlaid {
    position: relative;
}

.overlayer {
    position: absolute;
    top: 84px;
    left: 85px;
    text-shadow: 1px 1px #666666;
    color: white;
}

.wrapword {
    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    white-space: pre-wrap;       /* css-3 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
    white-space: -webkit-pre-wrap; /* Newer versions of Chrome/Safari*/
    word-break: break-all;
    white-space: normal;
}

.top-buffer { 
    margin-top: 10px; 
}

抱歉蓝色涂鸦！

我使用的是Bootstrap 3.3.1

Answer 1

你的代码和小提琴不是很想知道你想要完成什么，也许是这样的

<div align="center" class="top-buffer">
    <div class="col-sm-6 col-md-6 col-xs-6 text-right image-over">
        <div class="img-thumbnail">
            <img id="face-img" class="search-face" ng-src="{{faceImg}}">
        </div>
    </div>
    <div class="col-sm-6 col-md-6 col-xs-6 text-left image-over">
        <div class="overlaid img-thumbnail">
            <img id="face-img" class="search-face" ng-src="{{processedResults[selectedSearchResultIndex].img}}" ng-hide="showSearchResultDetails" ng-click="toggleSearchResultDetails()">

            <div class="search-face wrapword" ng-show="showSearchResultDetails" ng-click="toggleSearchResultDetails()">
                Name: <strong>{{processedResults[selectedSearchResultIndex].name}}</strong>
            </div>
          <span class="glyphicon glyphicon-info-sign overlayer text-primary" aria-hidden="true"></span>
        </div>
    </div>
</div>

工作小提琴 http://jsfiddle.net/52VtD/9314/

另外如果您正在使用bootstrap，请不要使用align = center 根据HTML5 CR，它需要继续支持“过时”功能，align = center属性相当棘手。