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

Question

我正在尝试在 boostrap angular-ui 模态中创建一个表单，并且在使用默认 bootstrap 网格时遇到问题modal-body

I build a row 然后立即 build a 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>

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

"Sign Our Guestbook" link 是我引用的模式的打开方式。

Answer 1

您看到的导致溢出到新行的额外 space 是由您的 <span class="glyphicon glyphicon-remove HoverMe pull-left CloseModalDark" ng-click="cancel()"></span> 由于位置样式之间的冲突引起的。尽管图标已移动，但其大小和填充仍在原地设置。

Answer 2

因为你的关闭图标：

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

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

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

Angular-UI Bootstrap Modal grid row columns incorrect width

angularjs

angular-ui-bootstrap

bootstrap-modal

twitter-bootstrap-3