Angular-UI Bootstrap 模态网格行列宽度不正确答案

【问题标题】：Angular-UI Bootstrap Modal grid row columns incorrect widthAngular-UI Bootstrap 模态网格行列宽度不正确
【发布时间】：2015-08-03 22:59:17
【问题描述】：

我正在尝试在 boostrap angular-ui 模态中构建一个表单，但在使用 modal-body 中的默认引导网格时遇到问题

我构建了一个row，然后立即构建了一个col-md-6，然后是另一个col-md-6，它溢出了，并且列并不像我预期的那样彼此相邻。我对此一无所知。

这是我的模态 HTML

<script type="text/ng-template" id="myModalContent.html">
<div class="modal-body">
    <span class="glyphicon glyphicon-remove HoverMe pull-left CloseModalDark" ng-click="cancel()"></span>
    <form>
        <div class="row">
            <div class="col-md-6">
                <input type="text" ng-model="Name" class="form-control" placeholder="Full Name"/>
            </div>
            <div class="col-md-6">
                <input type="text" ng-model="Name" class="form-control" placeholder="Your Email" />
            </div>
        </div>
    </form>
</div>

我知道链接到您的网站是不好的做法，但我不知道有任何其他方式可以证明这种行为。

“签署我们的留言簿”链接是我引用的模式的打开方式。

【问题讨论】：

标签： angularjs twitter-bootstrap-3 angular-ui-bootstrap bootstrap-modal

【解决方案1】：

由于位置样式之间的冲突，您看到的导致溢出到新行的额外空间是由您的<span class="glyphicon glyphicon-remove HoverMe pull-left CloseModalDark" ng-click="cancel()"></span> 引起的。图标的大小和内边距仍然设置在原位，即使它已被移动。

【讨论】：

【解决方案2】：

因为你的关闭图标：

<span class="glyphicon glyphicon-remove HoverMe pull-left CloseModalDark" ng-click="cancel()"></span>

它的样式包括position: relative;，它占据了.row的26px宽度。所以右边的输入框被挤压到下一行。设为position:absolute 并调整left 和top 值。它会起作用的。

【讨论】：

@mituw16 我的荣幸。