在模态上居中下拉输入

Question

我坚持设计我为创建时间表而制作的模态。这是我第一次使用 bootstrap，所以如果我公然错过了什么，我深表歉意。我已经通过在输入标签上将边距设置为 margin: 0 auto 来使我的文本输入居中，但这似乎不适用于我的下拉菜单，如下所示

我已经多次查看堆栈，我发现的唯一答案似乎是在暗示我已经尝试过的方法。

How to center input in a Bootstrap 3 modal?

(bootstrap) Input-group class doesn't allow me to centerize inputs in modal

谁能指出我解决这个问题的正确方向？谢谢！

<div class="container">
<div class="modal fade" id="createSchedule" tabindex="-1" role="dialog" aria-labelledby="createSchedule" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
                <h4 class="modal-title text-center">Create a New Schedule</h4>
            </div>

            <div class="modal-body" style="text-align: center">
                <div class="form-group">
                    <input class="form-control text-center" type="text" placeholder="Id" style="margin: 0 auto">
                </div>
                <div class="form-group">
                    <input class="form-control text-center" type="text" placeholder="ScheduleName" style="margin: 0 auto">
                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <div class="input-group">
                            <div class="input-group-btn">
                                <button style="margin: 0 auto" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Start Time <span class="caret"></span></button>
                                <ul class="dropdown-menu" role="menu">
                                    @foreach (var hour in hoursOfDay)
                                    {
                                        <li><a href="#">@hour</a></li>
                                    }
                                </ul>
                            </div>
                            <input style="margin: 0 auto" type="text" class="form-control" aria-label="...">
                        </div>
                    </div>
                </div>
                <br/>
                <div class=" row">
                    <div class="col-lg-6">
                        <div class=" input-group">
                            <div class="input-group-btn">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                Finish Time <span class="caret"></span></button>
                                <ul class="dropdown-menu" role="menu">
                                    @foreach (var hour in hoursOfDay)
                                    {
                                        <li style="margin: 0 auto"><a href="#">@hour</a></li>
                                    }
                                </ul>
                            </div>
                        <input style="margin: 0 auto" type="text" class="form-control" aria-label="...">
                    </div>

                    </div>
                </div>
                <div class="modal-footer ">
                    <button type="button" class="btn btn-success btn-lg" style="width: 100%;"><span class="glyphicon glyphicon-ok-sign"></span> Create</button>
                </div>
            </div>
        </div>
</div>

Answer 1

当你想将你的输入置于 bootstrap 的中心时，你实际上应该能够通过使用偏移来做到这一点。

class"col-md-offset-3"

这使得您的对象在页面中位于 3/12，所以当它本身是居中的 1/2 大。

在模态上居中下拉输入

Centering Drop down inputs on a modal

css

razor

twitter-bootstrap