在Bootstrap Modal右侧设置关闭图标

时间:2015-01-12 06:34:56

标签: html css twitter-bootstrap

我目前正在使用Twitter-Bootstrap Modal,我需要关闭标题右侧的图标。我尝试使用CSS来设置它,但它没有用。

代码:

<div class="modal-content json-modal-body" id="full-width" ng-controller="projectdetailsController" close="CloseModal()">
    <div class="modal-header modal-header-confirm">
        <h4 class="modal-title ng-binding">
            <span class="glyphicon glyphicon-indent-left"></span>{{modalOptions.headerText}}
            <a title="Close"><i ng-click="CloseModal()" class="glyphicon glyphicon-remove icon-arrow-right"></i></a> 
        </h4>
    </div>
    <div class="modal-body"> 
         <pre class="Modal-pre" ng-bind-html="modalOptions.bodyText"></pre>
    </div>
</div>

我尝试使用的CSS:

 .icon-arrow-right {
  float: right;
  }

1 个答案:

答案 0 :(得分:4)

<div class="modal-content json-modal-body" id="full-width" ng-controller="projectdetailsController" close="CloseModal()">
<div class="modal-header modal-header-confirm">
    <h4 class="modal-title ng-binding">
        <span class="glyphicon glyphicon-indent-left"></span>{{modalOptions.headerText}}
        <a title="Close"><i ng-click="CloseModal()" class="glyphicon glyphicon-remove icon-arrow-right pull-right"></i></a> 
    </h4>
</div>
<div class="modal-body"> 
     <pre class="Modal-pre" ng-bind-html="modalOptions.bodyText"></pre>
</div>
</div>

只需在类中添加一个右拉,即可使元素显示正确。上面的代码应该可行