bootstrap modal form-inline赢了＆＃34;＃34; inline＆＃34;纽扣

Question

我真的遇到了这个问题。创建了下一个模式.form-inline，但取消按钮不在内联中，这是代码：

<div id="loginModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Login </h4>
        </div>
        <div class="modal-body">

            <div class="form-inline">

                <div class="form-group">
                <label class="sr-only" for="email">Email Address</label>
                <input type="email" class="form-control-input-sm text-center" placeholder="Email">
            </div>
            <div class="form-group">
                <label class="sr-only" for="password">Password</label>
                <input type="password" class="form-control-input-sm text-center" placeholder="Password">
            </div>
                <input type="checkbox"><span style="color:#9d9797">Remember me</span>

                <button type="submit" class="btn btn-info">Sign In</button>
                <button type="button" class="btn btn-default btn-sm"
                   data-dismiss="modal">Cancel</button>
            </div>              
        </div>
    </div>
    </div>
</div>

它的图片：

Answer 1

默认输入max-width是280px，您可以定义一个类来减少它，例如

<style>
    .input-short {
        max-width: 130px !important;
    }
</style>

然后将其应用于输入文本框

<input type="email" class="form-control input-short" id="email" placeholder="Email">

这应该可以满足您的需求（相应地调整最大宽度）。