Bootstrap模态框宽度无法自适应内容

Question

在实现一个模态对话框后，我注意到它会自动拉伸以适应屏幕大小，但我只想让它和里面的内容一样宽。我不明白为什么使用了 width: auto; 后还会出现这种情况。

var modalItems = document.getElementById('itemsModal');

var btnItems = document.getElementById("btn_items");

var btnCloseModalItems = document.getElementById("btn_closeItemsModal");

btnItems.onclick = function() {
  modalItems.style.display = "block";
}

btnCloseModalItems.onclick = function() {
  modalItems.style.display = "none";
}

#btn_closeItemsModal {
  float: right;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.8);
}

.close {
  color: white;
  background-color: white;
}


/* Modal Content */

.modal-content {
  position: relative;
  color: black;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: auto;
}

.modal-header {
  background-color: #0099cc;
  color: white;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="itemsModal" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="btn btn-default btn-lg" id="btn_closeItemsModal"><span aria-hidden="true">&times;</span></button>
      <h3>Items</h3>
    </div>
    <div class="modal-body">
      <div class="list-group">
        <a href="#" class="list-group-item list-group-item-action">Africa</a>
        <a href="#" class="list-group-item list-group-item-action">Antarctica</a>
        <a href="#" class="list-group-item list-group-item-action">Asia</a>
        <a href="#" class="list-group-item list-group-item-action">Eurpoe</a>
        <a href="#" class="list-group-item list-group-item-action">North America</a>
        <a href="#" class="list-group-item list-group-item-action">Oceania</a>
        <a href="#" class="list-group-item list-group-item-action">South America</a>
      </div>
    </div>
  </div>
</div>


<button class="btn-lg btn-primary" id="btn_items">My Items</button>

- wbk727

---

类似于.modal-content {max-width: -moz-max-content;}这样的东西？不是答案，只是为了确保你想要的样式。 - Toleo

我不想定义一个特定的宽度。在<768像素设备上，我希望它是100％，而在>768像素设备上是“适合内容”。 - wbk727

尝试使用 .modal-sm 类了吗？ - Toleo

Answer 1

使用display:table来定义你的.modal-content

JsFiddle

var modalItems = document.getElementById('itemsModal');

var btnItems = document.getElementById("btn_items");

var btnCloseModalItems = document.getElementById("btn_closeItemsModal");

btnItems.onclick = function() {
  modalItems.style.display = "block";
}

btnCloseModalItems.onclick = function() {
  modalItems.style.display = "none";
}

#btn_closeItemsModal {
  float: right;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.8);
}

.close {
  color: white;
  background-color: white;
}


/* Modal Content */

.modal-content {
  position: relative;
  color: black;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: auto;
  display: table;
}

.modal-header {
  background-color: #0099cc;
  color: white;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="itemsModal" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="btn btn-default btn-lg" id="btn_closeItemsModal"><span aria-hidden="true">&times;</span></button>
      <h3>Items</h3>
    </div>
    <div class="modal-body">
      <div class="list-group">
        <a href="#" class="list-group-item list-group-item-action">Africa</a>
        <a href="#" class="list-group-item list-group-item-action">Antarctica</a>
        <a href="#" class="list-group-item list-group-item-action">Asia</a>
        <a href="#" class="list-group-item list-group-item-action">Eurpoe</a>
        <a href="#" class="list-group-item list-group-item-action">North America</a>
        <a href="#" class="list-group-item list-group-item-action">Oceania</a>
        <a href="#" class="list-group-item list-group-item-action">South America</a>
      </div>
    </div>
  </div>
</div>


<button class="btn-lg btn-primary" id="btn_items">My Items</button>

- Taki

Answer 2

正如您所知，几乎所有元素（如<div>、<p>和<h1>等）默认都具有display:block CSS属性，因此这些元素将占用父元素的全部宽度。因此，如果您不为.modal-content和.modal定义任何宽度，则由于display:block，它将继承父元素的宽度。

您应该添加max-width约束到您的.modal-content以实现这一点。此外，您可以添加margin:0 auto来使.modal-content居中对齐。

- Ashvin777