自举折叠列在单击时没有正确对齐

Question

我正在创建两个单独的关键字搜索选项使用引导折叠。折叠项的对齐方式看起来是正确的，直到单击“关键字搜索”。当折叠在“关键字搜索”上打开时，则“关联搜索”折叠按钮移动到页面的右角。如何使第二个引导折叠按钮保持在第一个引导折叠按钮之下？

​

<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>

​

Answer 1

将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>

​