Question

以下是我的登录对话框代码。

<div class="modal fade" id="loginModal" tabindex="-1" role="dialog"
    aria-labelledby="loginModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="dialog">
        <div class="modal-content">
            <div class="modal-header text-center">
            <button type="button" class="close" data-dismiss="modal"
                    aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h2 class="modal-title" id="loginModalLabel">Log In or Sign Up</h2>
            </div>
            <div class="modal-body text-center">
                <div class="row">
                    <form class="form-inline">

                        <div class="form-group col-md-3">
                            <img alt="Facebook" class="img-soc"
                                src="./images/facebookPage.png">
                        </div>
                        <div class="form-group col-md-3">
                            <img alt="Google+ " class="img-soc"
                                src="./images/googlePlusPage.png">
                        </div>
                        <div class="form-group col-md-3">
                            <img alt="Twitter" class="img-soc"
                                src="./images/twitterPage.png">
                        </div>
                    </form>
                </div>

                <div class="row">
                    <form class="col-md-12">
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-addon" id="basic-addon1"><span
                                    class="glyphicon glyphicon-user"></span></span> <input type="text"
                                    class="form-control" placeholder="Username"
                                    aria-describedby="basic-addon1">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-addon" id="basic-addon1"><span
                                    class="glyphicon glyphicon-lock"></span></span> <input type="text"
                                    class="form-control" placeholder="Username"
                                    aria-describedby="basic-addon1">
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-primary">Login</button>
                <button type="button" class="btn btn-secondary">Sign Up</button>
            </div>
        </div>
    </div>
</div>

登录对话框的屏幕截图

如何将社交媒体图像置于对话中心？以及如何改变模态的大小？

我不想提供自定义边距，并希望使用bootstrap类来完成。请帮忙

提前致谢！

Answer 1

如果尚未完成，则应将图像居中。

.img-soc {
margin-right: auto;
margin-left: auto;
}

我认为这可以解决您的问题。否则你应该在bootstrap中做一个偏移。

Answer 2

.form-inline {
   display: flex;
   justify-contents: center;
   align-items: center;
}

这应该使您的社交媒体图像居中。

form.col-md-12 {
   padding: 10px;
}

这应该从容器的边框为你的表格输入呼吸空间.`

如何将社交媒体图像置于模态对话的中心？

2 个答案: