Textarea宽度超出了引导模态

时间：2019-05-08 17:45:22

标签： css twitter-bootstrap

单击按钮时，我正在显示一个引导程序模态。在模态主体内部，我保留了几个按钮和一个textarea。当我将按钮和textarea的宽度设置为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>

4 个答案:

答案 0 :(得分：0)

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

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

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

答案 1 :(得分：0)

只需将container更改为container-fluid； 

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

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

.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-fluid">
                        <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>

答案 2 :(得分：0)

您可以使用Bootstrap 4而不是3吗？如果是这样，您的代码将照常工作。这是您使用Bootstrap 4 CDN的代码。

.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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

如果您不能使用Bootstrap 4，只需将以下代码段添加到CSS中：

.modal-content .container {
    width: 100%;
}

答案 3 :(得分：0)

您在模态体内有一个容器。该容器的宽度由引导程序设置，并取决于显示区域的大小。它不在乎您的实际模态有多大。因此，在某些情况下，容器比模态容器宽。

文本区域和按钮是容器的子级。因此，它们长到了容器宽度的100％，而不是模态容器的宽度。

您需要以某种方式限制容器的宽度：

.modal-body .container {
    max-width: 100%;
}
相关问题
最新问题