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>

Answer 1

对dispaly: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>

Answer 2

如您所知，默认情况下，几乎所有元素（如<div> and <p> and <h1> etc）都具有display:block CSS属性，因此所有元素都将采用父级的全宽度。因此，如果您不能为.modal-content和.modal定义任何宽度。 display:block然后由于max-width，它将继承父级的宽度。

您应该为.modal-content添加margin:0 auto约束来实现此目的。您也可以添加.modal-content以对齐build_path/N中心。