Question

我坚持设计一个模型，我已经创建了一个时间表。这是我第一次使用bootstrap，所以如果我公然错过了一些我道歉的话。我已设法通过在输入标记上将边距设置为margin: 0 auto来设置文本输入的中心，但这似乎与我的下拉列表无关，如下所示

enter image description here

我已经看了几次堆栈，我找到的唯一答案似乎是在暗示我已经尝试过的东西。

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

当你想把你的输入集中在引导程序中时，你应该实际上能够通过使用偏移来实现。

class"col-md-offset-3"

这使得你的对象在页面中是3/12所以当它自己是1/2大，它居中。

居中下拉输入模态

1 个答案: