Bootstrap 单击时折叠列未正确对齐
Bootstrap Collapse columns not aligning properly on click
我正在使用 Bootstrap collapse 创建两个单独的关键字搜索选项。在您单击之前，折叠项目的对齐方式看起来是正确的，"Keyword Search." 当折叠在 "Keyword Search," 上打开时，"Affiliation Search" 折叠按钮移动到页面的右上角。如何使第二个 bootstrap 折叠按钮保持在第一个 bootstrap 折叠按钮下方？
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<a role="button" data-toggle="collapse" href="#keyword-search" aria-expanded="false" aria-controls="keyword-search">
<h4>Search by Keyword</h4>
</a>
<div class="collapse" id="keyword-search">
<div class="well">
<ul>
<label class="col-md-4"><input type="checkbox" value="ag-health" id="ag-health"/> Agricultural Health</label>
<label class="col-md-4"><input type="checkbox" value="animal-health" id="animal-health"/> Animal Health </label>
<label class="col-md-4"><input type="checkbox" value="a-r" id="a-r"/> Antimicrobial Resistance </label>
<label class="col-md-4"><input type="checkbox" value="conservation" id="conservation" /> Conservation </label>
<label class="col-md-4"><input type="checkbox" value="economics" id="economics"/> Economics </label>
<label class="col-md-4"><input type="checkbox" value="entomology" id="entomology"/> Entomology </label>
<label class="col-md-4"><input type="checkbox" value="epidemiology" id="epidemiology"/> Epidemiology </label>
<label class="col-md-4"><input type="checkbox" value="food-safety" id="food-safety"/> Food Safety </label>
<label class="col-md-4"><input type="checkbox" value="history" id="history"/> History </label>
<label class="col-md-4"><input type="checkbox" value="human-health" id="human-health"/> Human Health</label>
<label class="col-md-4"><input type="checkbox" value="infectious-diseases" id="infectious-diseases"/> Infectious Diseases </label>
<label class="col-md-4"><input type="checkbox" value="outreach" id="outreach"/> Outreach </label>
<label class="col-md-4"><input type="checkbox" value="science-communication" id="science-communication"/> Science Communication </label>
<label class="col-md-4"><input type="checkbox" value="soil-health" id="soil-health"/> Soil Health </label>
<label class="col-md-4"><input type="checkbox" value="surveillance" id="surveillance"/> Surveillance </label>
<label class="col-md-4"><input type="checkbox" value="vet-med" id="vet-med"/> Veterinary Medicine </label>
<label class="col-md-4"><input type="checkbox" value="water-quality" id="water-quality"/> Water Quality </label>
</ul>
</div>
</div>
<a role="button" data-toggle="collapse" href="#affiliation-search" aria-expanded="false" aria-controls="affiliation-search">
<h4>Search by Affiliation</h4>
</a>
<div class="collapse" id="affiliation-search">
<div class="well">
<ul>
<form>
<label class="col-md-6"><input type="checkbox" value="ch-foundation" id="ch-foundation"/> Claire M Hubbard Foundation</label>
<label class="col-md-6"><input type="checkbox" value="creighton" id="creighton"/> Creighton University</label>
<label class="col-md-6"><input type="checkbox" value="wff" id="wff"/> Daugherty Water for Food Global Institute</label>
<label class="col-md-6"><input type="checkbox" value="doane" id="doane"/> Doane University</label>
<label class="col-md-6"><input type="checkbox" value="douglas-co-hd" id="douglas-co-hd"/> Douglas County Health Department</label>
<label class="col-md-6"><input type="checkbox" value="lancaster-hd" id="lancaster-hd"/> Lincoln-Lancaster County Health Department</label>
<label class="col-md-6"><input type="checkbox" value="lincoln-zoo" id="lincoln-zoo"/> Lincoln Children's Zoo</label>
<label class="col-md-6"><input type="checkbox" value="master-naturalist" id="master-naturalist"/> Master Naturalist</label>
<label class="col-md-6"><input type="checkbox" value="nature-con" id="nature-con"/> The Nature Conservancy in Nebraska</label>
<label class="col-md-6"><input type="checkbox" value="nedeq" id="nedeq"/> Nebraska Department of Environmental Quality</label>
<label class="col-md-6"><input type="checkbox" value="nedhhs" id="nedhhs"/> Nebraska Department of Health and Human Services</label>
<label class="col-md-6"><input type="checkbox" value="extension" id="extension"/> Nebraska Extension</label>
<label class="col-md-6"><input type="checkbox" value="game-parks" id="game-parks"/> Nebraska Game and Parks Commission</label>
<label class="col-md-6"><input type="checkbox" value="omaha-zoo" id="omaha-zoo"/> Omaha's Henry Doorly Zoo and Aquarium</label>
<label class="col-md-6"><input type="checkbox" value="pha" id="pha"/> Public Health Association of Nebraska</label>
<label class="col-md-6"><input type="checkbox" value="usda" id="usda"/> United States Department of Agriculture</label>
<label class="col-md-6"><input type="checkbox" value="usgs" id="usgs"/> United States Geological Survey</label>
<label class="col-md-6"><input type="checkbox" value="unk" id="unk"/> University of Nebraska-Kearney</label>
<label class="col-md-6"><input type="checkbox" value="unl" id="unl"/> University of Nebraska-Lincoln</label>
<label class="col-md-6"><input type="checkbox" value="unmc" id="unmc"/> University of Nebraska Medical Center</label>
<label class="col-md-6"><input type="checkbox" value="uno" id="uno"/> University of Nebraska-Omaha</label>
<label class="col-md-6"><input type="checkbox" value="water-center" id="water-center"/> University of Nebraska Water Center</label>
</form>
</ul>
</div>
</div>
把col-md-*改成col-sm-*/col-xs-*，就会停止错位。
但是你提到的问题，联盟搜索 向右移动，我没有看到这种情况发生。
它就在第一个下拉列表的正下方。
如果我不明白你的问题，请纠正我。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<a role="button" data-toggle="collapse" href="#keyword-search" aria-expanded="false" aria-controls="keyword-search">
<h4>Search by Keyword</h4>
</a>
<div class="collapse" id="keyword-search">
<div class="well">
<ul class="row">
<label class="col-xs-4"><input type="checkbox" value="ag-health" id="ag-health"/> Agricultural Health</label>
<label class="col-xs-4"><input type="checkbox" value="animal-health" id="animal-health"/> Animal Health </label>
<label class="col-xs-4"><input type="checkbox" value="a-r" id="a-r"/> Antimicrobial Resistance </label>
<label class="col-xs-4"><input type="checkbox" value="conservation" id="conservation" /> Conservation </label>
<label class="col-xs-4"><input type="checkbox" value="economics" id="economics"/> Economics </label>
<label class="col-xs-4"><input type="checkbox" value="entomology" id="entomology"/> Entomology </label>
<label class="col-xs-4"><input type="checkbox" value="epidemiology" id="epidemiology"/> Epidemiology </label>
<label class="col-xs-4"><input type="checkbox" value="food-safety" id="food-safety"/> Food Safety </label>
<label class="col-xs-4"><input type="checkbox" value="history" id="history"/> History </label>
<label class="col-xs-4"><input type="checkbox" value="human-health" id="human-health"/> Human Health</label>
<label class="col-xs-4"><input type="checkbox" value="infectious-diseases" id="infectious-diseases"/> Infectious Diseases </label>
<label class="col-xs-4"><input type="checkbox" value="outreach" id="outreach"/> Outreach </label>
<label class="col-xs-4"><input type="checkbox" value="science-communication" id="science-communication"/> Science Communication </label>
<label class="col-xs-4"><input type="checkbox" value="soil-health" id="soil-health"/> Soil Health </label>
<label class="col-xs-4"><input type="checkbox" value="surveillance" id="surveillance"/> Surveillance </label>
<label class="col-xs-4"><input type="checkbox" value="vet-med" id="vet-med"/> Veterinary Medicine </label>
<label class="col-xs-4"><input type="checkbox" value="water-quality" id="water-quality"/> Water Quality </label>
</ul>
</div>
</div>
<a role="button" data-toggle="collapse" href="#affiliation-search" aria-expanded="false" aria-controls="affiliation-search">
<h4>Search by Affiliation</h4>
</a>
<div class="collapse" id="affiliation-search">
<div class="well">
<ul class="row">
<form>
<label class="col-xs-6"><input type="checkbox" value="ch-foundation" id="ch-foundation"/> Claire M Hubbard Foundation</label>
<label class="col-xs-6"><input type="checkbox" value="creighton" id="creighton"/> Creighton University</label>
<label class="col-xs-6"><input type="checkbox" value="wff" id="wff"/> Daugherty Water for Food Global Institute</label>
<label class="col-xs-6"><input type="checkbox" value="doane" id="doane"/> Doane University</label>
<label class="col-xs-6"><input type="checkbox" value="douglas-co-hd" id="douglas-co-hd"/> Douglas County Health Department</label>
<label class="col-xs-6"><input type="checkbox" value="lancaster-hd" id="lancaster-hd"/> Lincoln-Lancaster County Health Department</label>
<label class="col-xs-6"><input type="checkbox" value="lincoln-zoo" id="lincoln-zoo"/> Lincoln Children's Zoo</label>
<label class="col-xs-6"><input type="checkbox" value="master-naturalist" id="master-naturalist"/> Master Naturalist</label>
<label class="col-xs-6"><input type="checkbox" value="nature-con" id="nature-con"/> The Nature Conservancy in Nebraska</label>
<label class="col-xs-6"><input type="checkbox" value="nedeq" id="nedeq"/> Nebraska Department of Environmental Quality</label>
<label class="col-xs-6"><input type="checkbox" value="nedhhs" id="nedhhs"/> Nebraska Department of Health and Human Services</label>
<label class="col-xs-6"><input type="checkbox" value="extension" id="extension"/> Nebraska Extension</label>
<label class="col-xs-6"><input type="checkbox" value="game-parks" id="game-parks"/> Nebraska Game and Parks Commission</label>
<label class="col-xs-6"><input type="checkbox" value="omaha-zoo" id="omaha-zoo"/> Omaha's Henry Doorly Zoo and Aquarium</label>
<label class="col-xs-6"><input type="checkbox" value="pha" id="pha"/> Public Health Association of Nebraska</label>
<label class="col-xs-6"><input type="checkbox" value="usda" id="usda"/> United States Department of Agriculture</label>
<label class="col-xs-6"><input type="checkbox" value="usgs" id="usgs"/> United States Geological Survey</label>
<label class="col-xs-6"><input type="checkbox" value="unk" id="unk"/> University of Nebraska-Kearney</label>
<label class="col-xs-6"><input type="checkbox" value="unl" id="unl"/> University of Nebraska-Lincoln</label>
<label class="col-xs-6"><input type="checkbox" value="unmc" id="unmc"/> University of Nebraska Medical Center</label>
<label class="col-xs-6"><input type="checkbox" value="uno" id="uno"/> University of Nebraska-Omaha</label>
<label class="col-md-6"><input type="checkbox" value="water-center" id="water-center"/> University of Nebraska Water Center</label>
</form>
</ul>
</div>
</div>
我正在使用 Bootstrap collapse 创建两个单独的关键字搜索选项。在您单击之前，折叠项目的对齐方式看起来是正确的，"Keyword Search." 当折叠在 "Keyword Search," 上打开时，"Affiliation Search" 折叠按钮移动到页面的右上角。如何使第二个 bootstrap 折叠按钮保持在第一个 bootstrap 折叠按钮下方？
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<a role="button" data-toggle="collapse" href="#keyword-search" aria-expanded="false" aria-controls="keyword-search">
<h4>Search by Keyword</h4>
</a>
<div class="collapse" id="keyword-search">
<div class="well">
<ul>
<label class="col-md-4"><input type="checkbox" value="ag-health" id="ag-health"/> Agricultural Health</label>
<label class="col-md-4"><input type="checkbox" value="animal-health" id="animal-health"/> Animal Health </label>
<label class="col-md-4"><input type="checkbox" value="a-r" id="a-r"/> Antimicrobial Resistance </label>
<label class="col-md-4"><input type="checkbox" value="conservation" id="conservation" /> Conservation </label>
<label class="col-md-4"><input type="checkbox" value="economics" id="economics"/> Economics </label>
<label class="col-md-4"><input type="checkbox" value="entomology" id="entomology"/> Entomology </label>
<label class="col-md-4"><input type="checkbox" value="epidemiology" id="epidemiology"/> Epidemiology </label>
<label class="col-md-4"><input type="checkbox" value="food-safety" id="food-safety"/> Food Safety </label>
<label class="col-md-4"><input type="checkbox" value="history" id="history"/> History </label>
<label class="col-md-4"><input type="checkbox" value="human-health" id="human-health"/> Human Health</label>
<label class="col-md-4"><input type="checkbox" value="infectious-diseases" id="infectious-diseases"/> Infectious Diseases </label>
<label class="col-md-4"><input type="checkbox" value="outreach" id="outreach"/> Outreach </label>
<label class="col-md-4"><input type="checkbox" value="science-communication" id="science-communication"/> Science Communication </label>
<label class="col-md-4"><input type="checkbox" value="soil-health" id="soil-health"/> Soil Health </label>
<label class="col-md-4"><input type="checkbox" value="surveillance" id="surveillance"/> Surveillance </label>
<label class="col-md-4"><input type="checkbox" value="vet-med" id="vet-med"/> Veterinary Medicine </label>
<label class="col-md-4"><input type="checkbox" value="water-quality" id="water-quality"/> Water Quality </label>
</ul>
</div>
</div>
<a role="button" data-toggle="collapse" href="#affiliation-search" aria-expanded="false" aria-controls="affiliation-search">
<h4>Search by Affiliation</h4>
</a>
<div class="collapse" id="affiliation-search">
<div class="well">
<ul>
<form>
<label class="col-md-6"><input type="checkbox" value="ch-foundation" id="ch-foundation"/> Claire M Hubbard Foundation</label>
<label class="col-md-6"><input type="checkbox" value="creighton" id="creighton"/> Creighton University</label>
<label class="col-md-6"><input type="checkbox" value="wff" id="wff"/> Daugherty Water for Food Global Institute</label>
<label class="col-md-6"><input type="checkbox" value="doane" id="doane"/> Doane University</label>
<label class="col-md-6"><input type="checkbox" value="douglas-co-hd" id="douglas-co-hd"/> Douglas County Health Department</label>
<label class="col-md-6"><input type="checkbox" value="lancaster-hd" id="lancaster-hd"/> Lincoln-Lancaster County Health Department</label>
<label class="col-md-6"><input type="checkbox" value="lincoln-zoo" id="lincoln-zoo"/> Lincoln Children's Zoo</label>
<label class="col-md-6"><input type="checkbox" value="master-naturalist" id="master-naturalist"/> Master Naturalist</label>
<label class="col-md-6"><input type="checkbox" value="nature-con" id="nature-con"/> The Nature Conservancy in Nebraska</label>
<label class="col-md-6"><input type="checkbox" value="nedeq" id="nedeq"/> Nebraska Department of Environmental Quality</label>
<label class="col-md-6"><input type="checkbox" value="nedhhs" id="nedhhs"/> Nebraska Department of Health and Human Services</label>
<label class="col-md-6"><input type="checkbox" value="extension" id="extension"/> Nebraska Extension</label>
<label class="col-md-6"><input type="checkbox" value="game-parks" id="game-parks"/> Nebraska Game and Parks Commission</label>
<label class="col-md-6"><input type="checkbox" value="omaha-zoo" id="omaha-zoo"/> Omaha's Henry Doorly Zoo and Aquarium</label>
<label class="col-md-6"><input type="checkbox" value="pha" id="pha"/> Public Health Association of Nebraska</label>
<label class="col-md-6"><input type="checkbox" value="usda" id="usda"/> United States Department of Agriculture</label>
<label class="col-md-6"><input type="checkbox" value="usgs" id="usgs"/> United States Geological Survey</label>
<label class="col-md-6"><input type="checkbox" value="unk" id="unk"/> University of Nebraska-Kearney</label>
<label class="col-md-6"><input type="checkbox" value="unl" id="unl"/> University of Nebraska-Lincoln</label>
<label class="col-md-6"><input type="checkbox" value="unmc" id="unmc"/> University of Nebraska Medical Center</label>
<label class="col-md-6"><input type="checkbox" value="uno" id="uno"/> University of Nebraska-Omaha</label>
<label class="col-md-6"><input type="checkbox" value="water-center" id="water-center"/> University of Nebraska Water Center</label>
</form>
</ul>
</div>
</div>
把col-md-*改成col-sm-*/col-xs-*，就会停止错位。
但是你提到的问题，联盟搜索 向右移动，我没有看到这种情况发生。
它就在第一个下拉列表的正下方。
如果我不明白你的问题，请纠正我。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<a role="button" data-toggle="collapse" href="#keyword-search" aria-expanded="false" aria-controls="keyword-search">
<h4>Search by Keyword</h4>
</a>
<div class="collapse" id="keyword-search">
<div class="well">
<ul class="row">
<label class="col-xs-4"><input type="checkbox" value="ag-health" id="ag-health"/> Agricultural Health</label>
<label class="col-xs-4"><input type="checkbox" value="animal-health" id="animal-health"/> Animal Health </label>
<label class="col-xs-4"><input type="checkbox" value="a-r" id="a-r"/> Antimicrobial Resistance </label>
<label class="col-xs-4"><input type="checkbox" value="conservation" id="conservation" /> Conservation </label>
<label class="col-xs-4"><input type="checkbox" value="economics" id="economics"/> Economics </label>
<label class="col-xs-4"><input type="checkbox" value="entomology" id="entomology"/> Entomology </label>
<label class="col-xs-4"><input type="checkbox" value="epidemiology" id="epidemiology"/> Epidemiology </label>
<label class="col-xs-4"><input type="checkbox" value="food-safety" id="food-safety"/> Food Safety </label>
<label class="col-xs-4"><input type="checkbox" value="history" id="history"/> History </label>
<label class="col-xs-4"><input type="checkbox" value="human-health" id="human-health"/> Human Health</label>
<label class="col-xs-4"><input type="checkbox" value="infectious-diseases" id="infectious-diseases"/> Infectious Diseases </label>
<label class="col-xs-4"><input type="checkbox" value="outreach" id="outreach"/> Outreach </label>
<label class="col-xs-4"><input type="checkbox" value="science-communication" id="science-communication"/> Science Communication </label>
<label class="col-xs-4"><input type="checkbox" value="soil-health" id="soil-health"/> Soil Health </label>
<label class="col-xs-4"><input type="checkbox" value="surveillance" id="surveillance"/> Surveillance </label>
<label class="col-xs-4"><input type="checkbox" value="vet-med" id="vet-med"/> Veterinary Medicine </label>
<label class="col-xs-4"><input type="checkbox" value="water-quality" id="water-quality"/> Water Quality </label>
</ul>
</div>
</div>
<a role="button" data-toggle="collapse" href="#affiliation-search" aria-expanded="false" aria-controls="affiliation-search">
<h4>Search by Affiliation</h4>
</a>
<div class="collapse" id="affiliation-search">
<div class="well">
<ul class="row">
<form>
<label class="col-xs-6"><input type="checkbox" value="ch-foundation" id="ch-foundation"/> Claire M Hubbard Foundation</label>
<label class="col-xs-6"><input type="checkbox" value="creighton" id="creighton"/> Creighton University</label>
<label class="col-xs-6"><input type="checkbox" value="wff" id="wff"/> Daugherty Water for Food Global Institute</label>
<label class="col-xs-6"><input type="checkbox" value="doane" id="doane"/> Doane University</label>
<label class="col-xs-6"><input type="checkbox" value="douglas-co-hd" id="douglas-co-hd"/> Douglas County Health Department</label>
<label class="col-xs-6"><input type="checkbox" value="lancaster-hd" id="lancaster-hd"/> Lincoln-Lancaster County Health Department</label>
<label class="col-xs-6"><input type="checkbox" value="lincoln-zoo" id="lincoln-zoo"/> Lincoln Children's Zoo</label>
<label class="col-xs-6"><input type="checkbox" value="master-naturalist" id="master-naturalist"/> Master Naturalist</label>
<label class="col-xs-6"><input type="checkbox" value="nature-con" id="nature-con"/> The Nature Conservancy in Nebraska</label>
<label class="col-xs-6"><input type="checkbox" value="nedeq" id="nedeq"/> Nebraska Department of Environmental Quality</label>
<label class="col-xs-6"><input type="checkbox" value="nedhhs" id="nedhhs"/> Nebraska Department of Health and Human Services</label>
<label class="col-xs-6"><input type="checkbox" value="extension" id="extension"/> Nebraska Extension</label>
<label class="col-xs-6"><input type="checkbox" value="game-parks" id="game-parks"/> Nebraska Game and Parks Commission</label>
<label class="col-xs-6"><input type="checkbox" value="omaha-zoo" id="omaha-zoo"/> Omaha's Henry Doorly Zoo and Aquarium</label>
<label class="col-xs-6"><input type="checkbox" value="pha" id="pha"/> Public Health Association of Nebraska</label>
<label class="col-xs-6"><input type="checkbox" value="usda" id="usda"/> United States Department of Agriculture</label>
<label class="col-xs-6"><input type="checkbox" value="usgs" id="usgs"/> United States Geological Survey</label>
<label class="col-xs-6"><input type="checkbox" value="unk" id="unk"/> University of Nebraska-Kearney</label>
<label class="col-xs-6"><input type="checkbox" value="unl" id="unl"/> University of Nebraska-Lincoln</label>
<label class="col-xs-6"><input type="checkbox" value="unmc" id="unmc"/> University of Nebraska Medical Center</label>
<label class="col-xs-6"><input type="checkbox" value="uno" id="uno"/> University of Nebraska-Omaha</label>
<label class="col-md-6"><input type="checkbox" value="water-center" id="water-center"/> University of Nebraska Water Center</label>
</form>
</ul>
</div>
</div>