Angular-UI引导模式网格行列宽度不正确

I am trying to build a form in boostrap angular-ui modal, and am having an issue with using the default bootstrap grid in the modal-body

我正在尝试用boostrap angular-ui模式构建一个表单，我对在modal-body中使用默认的bootstrap网格有异议

I build a row and then immediately build a col-md-6 followed by another col-md-6 and it is overflowing and colums are not next to each other like I would expect. I'm at a loss on this one.

我构建了一个行，然后立即构建一个colm -md-6，接着是另一个colm -md-6，它是溢出的，而且列之间并不像我预期的那样相邻。这件事我搞不懂。

Here is the HTML I have for the modal

这是模态的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>

I know it's bad practice to link to your site, but I don't know any other way to demonstrate this behavior.

我知道链接到你的网站是不好的做法，但我不知道有什么其他的方式来证明这种行为。

The "Sign Our Guestbook" link is how the modal that I am referencing is opened.

“签名我们的留言簿”链接是如何打开我正在引用的模式。

2 个解决方案

#1

The extra space you are seeing which is causing the overflow onto the new line is caused by your <span class="glyphicon glyphicon-remove HoverMe pull-left CloseModalDark" ng-click="cancel()"></span> due to a conflict between the position styles. The size and padding of the icon is still being set in place even though it's moved.

您正在看到的导致新行溢出的额外空间是由由于位置样式之间的冲突。图标的大小和填充仍然在设置中，即使它被移动了。

#2

Because your close icon:

因为你的图标:

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

Its styles include position: relative;, which occupies 26px width of the .row. So the right input box is squeezed to next line. Make it position:absolute and adjust the left and top value. It will work.

它的样式包括位置:relative;它占用了.row的26px宽度。所以右边的输入框被压缩到下一行。使其位置:绝对，调整左值和上值。它将工作。

#1