Question

我正在尝试使用boostrap angular-ui模式构建一个表单，并且在使用modal-body

中的默认引导网格时遇到问题

我构建了一个row，然后立即构建了一个col-md-6，然后是另一个col-md-6，它正在溢出，并且colums不会像我期望的那样彼此相邻。我对此感到茫然。

以下是我对模态

的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>

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

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

Answer 1

由于位置样式之间存在冲突，导致溢出到新行的额外空间是由<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;，其占据26px的{{1}}宽度。因此右侧输入框被挤压到下一行。设为.row并调整position:absolute和left值。它会起作用。

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

2 个答案: