Bootstrap折叠列在单击时未正确对齐

时间：2018-02-08 19:16:45

标签： html twitter-bootstrap-3 collapse

我正在使用Bootstrap collapse创建两个单独的关键字搜索选项。在您单击“关键字搜索”之前，折叠项目的对齐方式看起来是正确的。在“关键字搜索”中打开折叠后，“关联搜索”折叠按钮将移动到页面的右上角。如何使第二个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>

1 个答案:

答案 0 :(得分：0)

将col-md-*更改为col-sm-* / col-xs-*，它将阻止错位。 但是你提到的问题， Affiliation Search 向右移动，我不会发现这种情况发生。

它位于第一个下拉列表的正下方。

如果我不理解你的问题，请纠正我。

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题