如何使引导下拉列始终与行对齐

Question

使用Bootstrap 3.3.4，我试图获得一个动态数量为“图像平铺”的列表（或网格＆＃39;）。单击时每个选项都有一组不同的选项。

这是我到目前为止所拥有的： https://jsfiddle.net/tzachary89/04meys2w/

（请忽略愚蠢的图像）

正如您在单击每个图像时看到的那样，下拉列表会正确显示，但它与单击的图像对齐。是否可以让它与行对齐？

这里有一些代码，因为我必须：

   <div class="image-container  row" id="myContainer">
 <div class="dropdown">
   <div class="imageTile" data-toggle="dropdown"  aria-haspopup="true" aria-expanded="false">
      <div id="image-badge" style="position:absolute;margin-left:10px;display:none;" class="buttonCountBadge border border-dark rounded-circle badge badge-light">3</div>
      <img src="https://rfclipart.com/image2/thumbnail/3b-3b-f2/head-with-beard-and-hair-Download-Royalty-free-Vector-File-EPS-359793.jpg" />

  </div>


 <div  class="dropdown-menu image-dropdown-menu">
    <button class="btn gridButton btn-default" type="button">Neck</button>
    <button class="btn gridButton btn-default" type="button">Shoulder - Front - Left</button>
    <button class="btn gridButton btn-default" type="button">Shoulder - Front - Right</button>
    <button class="btn gridButton btn-default" type="button">Shoulder - Back - Left</button>
    <button class="btn gridButton btn-default" type="button">Shoulder - Back - Right</button>
    <button class="btn gridButton btn-default" type="button">Pectoris - Left</button>
    <button class="btn gridButton btn-default" type="button">Pectoris - Right</button>
    <button class="btn gridButton btn-default" type="button">Ribs - Left</button>
    <button class="btn gridButton btn-default" type="button">Ribs - Right</button>
    <button class="btn gridButton btn-default" type="button">Abdomen</button>
    <button class="btn gridButton btn-default" type="button">Back - Upper</button>
    <button class="btn gridButton btn-default" type="button">Back - Lower</button>
  </div>


</div>

Answer 1

添加此款式

.image-container {
  width: 100%;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.imageTile {
  padding: 5px;
  max-width: 160px;
  max-height: 160px;
  cursor: pointer;
}

.dropdown-menu {
  display: none;
  text-align: center;
  border-radius: 0;
  border-width: 0px;
  margin-top: -1px;
  max-height: 700px;
}

.image-dropdown-menu {
  text-align: center;
  border-radius: 0;
  border-width: 0px;
  margin-top: -1px;
  width: 100vw;
  left: 0;
  max-height: 700px;
  overflow: auto;
  padding: .5rem;
  margin-top: 5px;
  min-height: 160px;
}

.dropdown.open {
  display: flex !important;
}

.btn {
  margin-top: 10px;
}

.header {
  font-size: small;
  font-weight: 10;
}

.dropdown.open {
  position: static;
}

.dropdown-menu.image-dropdown-menu {
  left: 25px !important;
  width: 98%;
  top: 180px;
}

现在，下拉列表对于正文而言绝对是绝对的，而不是相对父容器。

<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<div class="image-container  row" id="myContainer">
  <div class="dropdown">
    <div class="imageTile" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <div id="image-badge" style="position:absolute;margin-left:10px;display:none;" class="buttonCountBadge border border-dark rounded-circle badge badge-light">3</div>
      <img src="https://rfclipart.com/image2/thumbnail/3b-3b-f2/head-with-beard-and-hair-Download-Royalty-free-Vector-File-EPS-359793.jpg" />

    </div>


    <div class="dropdown-menu image-dropdown-menu">
      <button class="btn gridButton btn-default" type="button">Neck</button>
      <button class="btn gridButton btn-default" type="button">Shoulder - Front - Left</button>
      <button class="btn gridButton btn-default" type="button">Shoulder - Front - Right</button>
      <button class="btn gridButton btn-default" type="button">Shoulder - Back - Left</button>
      <button class="btn gridButton btn-default" type="button">Shoulder - Back - Right</button>
      <button class="btn gridButton btn-default" type="button">Pectoris - Left</button>
      <button class="btn gridButton btn-default" type="button">Pectoris - Right</button>
      <button class="btn gridButton btn-default" type="button">Ribs - Left</button>
      <button class="btn gridButton btn-default" type="button">Ribs - Right</button>
      <button class="btn gridButton btn-default" type="button">Abdomen</button>
      <button class="btn gridButton btn-default" type="button">Back - Upper</button>
      <button class="btn gridButton btn-default" type="button">Back - Lower</button>
    </div>


  </div>






















  <div class="dropdown">
    <div class="imageTile" data-toggle="dropdown">
      <img src="https://cdn.athlonoutdoors.com/wp-content/uploads/sites/5/2015/02/Holstein-150x150.1511972782.jpg">
    </div>

    <div class="dropdown-menu image-dropdown-menu">

      <div class="row">
        <div class="offset-md-3 offset-3 offset-sm-3 col-1 col-sm-1 col-md-1 header">Slight Pain</div>
        <div class="offset-md-1 offset-1 offset-sm-1 col-1 col-sm-1 col-md-1 header">Moderate Pain</div>
        <div class="offset-md-1 offset-1 offset-sm-1 col-1 col-sm-1 col-md-1 header">Extreme Pain</div>
      </div>


      <div class="row form-inline">
        <div class="col-md-3 col-sm-3 ">Hip - Left</div>
        <div class="col-md-1 col-sm-1 ">
          <button class="btn btn-light border border-info" type="button">1</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">2</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">3</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">4</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">5</button></div>
        <div class="col-md-4 col-sm-4">
          <input class="form-control" placeholder="Comments..." />
        </div>
      </div>


      <div class="row form-inline">
        <div class="col-md-3 col-sm-3">Hip - Right</div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">1</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">2</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">3</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">4</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">5</button></div>
        <div class="col-md-4 col-sm-4">
          <input class="form-control" placeholder="Comments..." />
        </div>
      </div>

      <div class="row form-inline">
        <div class="col-md-3 col-sm-3">Groin</div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">1</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">2</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">3</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">4</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">5</button></div>
        <div class="col-md-4 col-sm-4">
          <input class="form-control" placeholder="Comments..." />
        </div>
      </div>

      <div class="row form-inline">
        <div class="col-md-3 col-sm-3">Buttocks - Left</div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">1</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">2</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">3</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">4</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">5</button></div>
        <div class="col-md-4 col-sm-4">
          <input class="form-control" placeholder="Comments..." />
        </div>
      </div>


      <div class="row form-inline">
        <div class="col-md-3 col-sm-3">Buttocks - Left</div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">1</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">2</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">3</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">4</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">5</button></div>
        <div class="col-md-4 col-sm-4">
          <input class="form-control" placeholder="Comments..." />
        </div>
      </div>
    </div>




  </div>


























  <div class="dropdown">
    <div class="imageTile" data-toggle="dropdown">
      <img src="https://cdn.athlonoutdoors.com/wp-content/uploads/sites/5/2015/02/Holstein-150x150.1511972782.jpg">
    </div>

    <div class="dropdown-menu image-dropdown-menu">

      <div class="row">
        <div class="offset-md-3 offset-3 offset-sm-3 col-1 col-sm-1 col-md-1 header">Slight Pain</div>
        <div class="offset-md-1 offset-1 offset-sm-1 col-1 col-sm-1 col-md-1 header">Moderate Pain</div>
        <div class="offset-md-1 offset-1 offset-sm-1 col-1 col-sm-1 col-md-1 header">Extreme Pain</div>
      </div>


      <div class="row form-inline">
        <div class="col-md-3 col-sm-3 ">Hip - Left</div>
        <div class="col-md-1 col-sm-1 ">
          <button class="btn btn-light border border-info" type="button">1</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">2</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">3</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">4</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">5</button></div>
        <div class="col-md-4 col-sm-4">
          <input class="form-control" placeholder="Comments..." />
        </div>
      </div>


      <div class="row form-inline">
        <div class="col-md-3 col-sm-3">Hip - Right</div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">1</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">2</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">3</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">4</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">5</button></div>
        <div class="col-md-4 col-sm-4">
          <input class="form-control" placeholder="Comments..." />
        </div>
      </div>

      <div class="row form-inline">
        <div class="col-md-3 col-sm-3">Groin</div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">1</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">2</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">3</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">4</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">5</button></div>
        <div class="col-md-4 col-sm-4">
          <input class="form-control" placeholder="Comments..." />
        </div>
      </div>

      <div class="row form-inline">
        <div class="col-md-3 col-sm-3">Buttocks - Left</div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">1</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">2</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">3</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">4</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">5</button></div>
        <div class="col-md-4 col-sm-4">
          <input class="form-control" placeholder="Comments..." />
        </div>
      </div>


      <div class="row form-inline">
        <div class="col-md-3 col-sm-3">Buttocks - Left</div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">1</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">2</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">3</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">4</button></div>
        <div class="col-md-1 col-sm-1">
          <button class="btn btn-light border border-info" type="button">5</button></div>
        <div class="col-md-4 col-sm-4">
          <input class="form-control" placeholder="Comments..." />
        </div>
      </div>
    </div>




  </div>




















  <div>
    <div class="imageTile" data-toggle="dropdown" href="#">
      <img src="https://cdn.stockphotosecrets.com//wp-content/uploads/2015/06/Adobe-Stock-logo-150x150.png">

      <div id="dropdown4" class="dropdown-menu image-dropdown-menu remove-padding">

        <div class="row">
          <div class="offset-md-3 col-sm-1 col-md-1 header">Slight Pain</div>
          <div class="offset-md-1 col-sm-1 col-md-1 header">Moderate Pain</div>
          <div class="offset-md-1 col-sm-1 col-md-1 header">Extreme Pain</div>
        </div>



        <div class="row form-inline">
          <div class="offset-md-1 col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">Head</button>
          </div>
          <div class="offset-md-6 col-md-4 col-sm-4">
            <input class="form-control" placeholder="Comments..."></input>
          </div>
        </div>


        <div class="row form-inline">
          <div class="offset-md-1 col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">Some long label as an example</button>
          </div>
          <div class="offset-md-6 col-md-4 col-sm-4">
            <input class="form-control" placeholder="Comments..."></input>
          </div>
        </div>



        <div class="row form-inline">
          <div class="offset-md-1 col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">Eyes</button>
          </div>
          <div class="offset-md-6 col-md-4 col-sm-4">
            <input class="form-control" placeholder="Comments..."></input>
          </div>
        </div>



        <div class="row form-inline">
          <div class="offset-md-1 col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">Ears</button>
          </div>
          <div class="offset-md-6 col-md-4 col-sm-4">
            <input class="form-control" placeholder="Comments..."></input>
          </div>
        </div>




      </div>
    </div>
  </div>















  <div>
    <div class="imageTile" data-toggle="dropdown" href="#">
      <img src="https://cdn.stockphotosecrets.com//wp-content/uploads/2015/06/Adobe-Stock-logo-150x150.png">
      <div id="dropdown4" class="dropdown-menu image-dropdown-menu remove-padding">

        <div class="row">
          <div class="offset-md-3 col-sm-1 col-md-1 header">Slight Pain</div>
          <div class="offset-md-1 col-sm-1 col-md-1 header">Moderate Pain</div>
          <div class="offset-md-1 col-sm-1 col-md-1 header">Extreme Pain</div>
        </div>



        <div class="row form-inline">
          <div class="col-md-3 col-sm-3">Hip - Left</div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">1</button></div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">2</button></div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">3</button></div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">4</button></div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">5</button></div>
          <div class="col-md-4 col-sm-4">
            <input class="form-control" placeholder="Comments..."></input>
          </div>
        </div>




        <div class="row form-inline">
          <div class="col-md-3 col-sm-3">Hip - Right</div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">1</button></div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">2</button></div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">3</button></div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">4</button></div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">5</button></div>
          <div class="col-md-4 col-sm-4">
            <input class="form-control" placeholder="Comments..."></input>
          </div>
        </div>

        <div class="row form-inline">
          <div class="col-md-3 col-sm-3">Groin</div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">1</button></div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">2</button></div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">3</button></div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">4</button></div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">5</button></div>
          <div class="col-md-4 col-sm-4">
            <input class="form-control" placeholder="Comments..."></input>
          </div>
        </div>

        <div class="row form-inline">
          <div class="col-md-3 col-sm-3">Buttocks - Left</div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">1</button></div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">2</button></div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">3</button></div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">4</button></div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">5</button></div>
          <div class="col-md-4 col-sm-4">
            <input class="form-control" placeholder="Comments..."></input>
          </div>
        </div>


        <div class="row form-inline">
          <div class="col-md-3 col-sm-3">Buttocks - Right</div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">1</button></div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">2</button></div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">3</button></div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">4</button></div>
          <div class="col-md-1 col-sm-1">
            <button class="btn btn-light border border-info" type="button">5</button></div>
          <div class="col-md-4 col-sm-4">
            <input class="form-control" placeholder="Comments..."></input>
          </div>
        </div>

      </div>
    </div>
  </div>





  <div>
    <div class="imageTile">
      <img src="https://cdn.stockphotosecrets.com//wp-content/uploads/2015/06/Adobe-Stock-logo-150x150.png">
    </div>
  </div>


  <div>
    <div class="imageTile">
      <img src="https://cdn.stockphotosecrets.com//wp-content/uploads/2015/06/Adobe-Stock-logo-150x150.png">
    </div>
  </div>

  <div>
    <div class="imageTile">
      <img src="https://cdn.stockphotosecrets.com//wp-content/uploads/2015/06/Adobe-Stock-logo-150x150.png">
    </div>
  </div>


</div>
<script>
  $(document).ready(function() {
    $('.dropdown-menu').click(function(e) {
      e.stopPropagation();
    });

    $('.image-container').on('hide.bs.dropdown', function(e) {
      $(e.relatedTarget).removeClass('selected').css("border", "0px");
    });


    $(".imageTile").click(function() {
      var selected = $(this).hasClass("selected");

      var container = $(this).parents(".image-container:first");
      $(".imageTile", container).removeClass("selected").css("border", "0px");

      if (!selected) {
        $(this).addClass("selected").css("border", "1px solid blue");
      }
    });

    $(".gridButton").click(function() {
      console.log("\n\n\n\n\n");

      var badge = $(this).parent().parent().closest("div").find('.buttonCountBadge:first');

      $(this).toggleClass('btn-default btn-primary');
      var count = $(this).closest("div").find('.btn-primary').length;

      console.log("Count: " + count);

      if (count != null && count > 0) {
        badge.show();
        badge.html(count);
      } else {
        badge.html(0);
        badge.hide();
      }
    });
  });
</script>

MessageReceiver