css - 文本区域宽度超出 Bootstrap 模式

Question

单击按钮时，我会显示一个 Bootstrap 模式。在模态主体内，我保留了几个按钮和一个文本区域。当我将按钮和文本区域的宽度设置为 100% 时，它会超出模式容器。如何修复它以便它始终覆盖所有设备(移动设备、台式机、平板电脑等)中的模态容器？

.fdbckmodal .btn {
    outline: 0 !important;
    box-shadow: none !important;
    width: 100%;
}

.feedbackModal .btn-primary {
    cursor: pointer;
    border-color: #3296d2;
    !important;
    background: rgb(255, 255, 255) !important;
    color: #000000;
    !important;
}

.feedbackModal .col-12 {
    margin-top: 5px;
}

.feedbackModal .btn:hover {
    color: #fff !important;
    background-color: #007bff !important;
    border-color: #007bff !important;
}

.feedbackModal .btn:focus {
    color: #fff !important;
    background-color: #007bff !important;
    border-color: #007bff !important;
}

.modal-body {
    position: relative;
    max-height: 400px;
    padding: 15px;
}

.feedbackOthers {
    height: 60px;
    padding: 5px;
    border-radius: 4px;
    resize: none;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<div class="container">
    <h2>Modal Example</h2>
    <!-- Trigger the modal with a button -->
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog fdbckmodal">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header" style="display:block !important; text-align:center;">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <h4 class="modal-title">Feedback</h4>
                </div>
                <div class="modal-body feedbackModal">
                    <div class="container">
                        <div class="row">
                            <div class="col-12">
                                <p>Sorry to know this wasn't the response you expected. Help us understand what went wrong</p>
                            </div>
                            <div class="col-12">
                                <button type="button" class="btn btn-primary">The answer is not relevant</button>
                            </div>
                            <div class="col-12">
                                <button type="button" class="btn btn-primary">The answer is wrong</button>
                            </div>
                            <div class="col-12">
                                <button type="button" class="btn btn-primary">Others</button>
                            </div>
                            <div class="col-12">
                                <textarea class="form-control"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

Answer 1

尝试在父类上设置最大宽度。

.model-body .container {
  max-width: 400px;
}

或者也可以尝试将类 btn btn-block 添加到您的 html 按钮标签中