Question

我正在尝试使用bootstrap和font-awesome图标创建自定义核对表框。这是我做的和输出：

    <style>
.bigmodal {
  height: 90%;
  left: 5%;
  margin: 0;
  width: 90%;
}

.bigmodal.fade.in {
  top: 5%;
}

.bigmodal .modal-body {
  max-height: none;
}

.bigmodal .modal-content {
  width: 100%;
}

</style>

<a data-toggle="modal" href="#HoastedModal" class="btn btn-info">Hoasted Modal</a>
<br>
<br>


<div id="HoastedModal" class="modal fade">
  <div class="modal-dialog bigmodal">
    <div class="modal-content">
      <div class="modal-header">
        <h4 id="modal-label">Header</h4>
      </div>
      <div class="modal-body">
        <div class="modal-body" id="poiModalBody">

          <div class="row" id="tree-container">
            <div class="col-md-4">
              <fieldset>
                <legend>Groups</legend>

                <div class="list-group poi-list">
                  <div id="groups-container">
                    <a class="list-group-item" data-id="37"  href="#" style="display: block;"> <span>ACCOMMODATION, EATING AND DRINKING</span> </a>
                    <a class="list-group-item" data-id="38"  href="#" style="display: block;"> <span>COMMERCIAL SERVICES</span> </a>
                    <a class="list-group-item" data-id="39"  href="#" style="display: block;"> <span>ATTRACTIONS</span> </a>
                    <a class="list-group-item" data-id="40"  href="#" style="display: block;"> <span>SPORT AND ENTERTAINMENT</span> </a>
                    <a class="list-group-item" data-id="41"  href="#" style="display: block;"> <span>EDUCATION AND HEALTH</span> </a>
                    <a class="list-group-item" data-id="42"  href="#" style="display: block;"> <span>PUBLIC INFRASTRUCTURE</span> </a>
                    <a class="list-group-item" data-id="43"  href="#" style="display: block;"> <span>MANUFACTURING AND PRODUCTION</span> </a>
                    <a class="list-group-item" data-id="44"  href="#" style="display: block;"> <span>RETAIL</span> </a>
                    <a class="list-group-item" data-id="45"  href="#" style="display: block;"> <span>TRANSPORT</span> </a>
                  </div>

                </div>
              </fieldset>
            </div>
            <div class="col-md-4">
              <fieldset>
                <legend>Categories</legend>

                <div class="list-group poi-list">

                  <div id="categories-container">
                    <a class="list-group-item poi-category"  href="#" style="display: block;"> <span>AIR</span> <i data-id="255" class="fa fa-square-o fa-2x pull-right category-selectall"></i> </a>
                    <a class="list-group-item poi-category"  href="#" style="display: block;">
                    <span>ROAD AND RAIL</span> <i data-id="256" class="fa fa-square-o fa-2x pull-right category-selectall"></i> </a>
                    <a class="list-group-item poi-category"  href="#" style="display: block;">
                    <span>WALKING</span> <i data-id="257" class="fa fa-square-o fa-2x pull-right category-selectall"></i> </a>
                    <a class="list-group-item poi-category"  href="#" style="display: block;">
                    <span>WATER</span> <i data-id="258" class="fa fa-square-o fa-2x pull-right category-selectall"></i> </a>
                    <a class="list-group-item poi-category"  href="#" style="display: block;">
                    <span>PUBLIC TRANSPORT, STATIONS AND INFRASTRUCTURE</span> <i data-id="259" class="fa fa-square-o fa-2x pull-right category-selectall"></i> </a>
                    <a class="list-group-item poi-category" 
                    href="#" style="display: block;"> <span>BUS TRANSPORT</span> <i data-id="260" class="fa fa-square-o fa-2x pull-right category-selectall"></i> </a>
                  </div>
                </div>
              </fieldset>


            </div>
            <div class="col-md-4">
              <fieldset>
                <legend>Classes</legend>

                <div class="list-group poi-list">

                  <div id="classes-container">
                    <i class="fa fa-hand-o-left"></i> Please select a cateogy.
                  </div>
                </div>
              </fieldset>
            </div>
            <div class="clearfix"></div>
          </div>
          <hr>
          <div class="row" id="calculation-section">
            <div class="pull-left" id="poi-calculate-quote-container">
              <button type="button" id="poi-calculate-price-button" class="btn btn-primary">Calculate Price</button>
              <button type="button" data-toggle="tooltip" data-placement="top" title="Tooltip on top" id="poi-reset-button" class="btn btn-primary">
                Reset Selection
              </button>
              <button type="button" id="poi-addto-basket-button" class="btn btn-success hide">Add To Basket</button>

            </div>
            <div class="pull-right">
              <button id="poi-tree-close-dialogue-button" class="btn">Close</button>
            </div>
          </div>
          <hr>

          <div id="quote-section">
            <div style="display: none" id="poi-quote-progressbar" class="progress progress-striped active">
              <div style="width: 100%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="progress-bar progress-bar-primary">
                <span class="sr-only">Please wait</span>
              </div>
            </div>
            <div id="poi-quote-result">

            </div>
          </div>

          <div class="clearfix">
          </div>
        </div>
      </div>
    </div>
    <!--modal-content-->
  </div>
  <!--modal-dialog-->
</div>
<!--modal-->

它在大多数分辨率下都很好用，但在某些分辨率下它有对齐问题，如下图所示：

此屏幕截图取自1613px的屏幕但是，如果我使屏幕略小或稍大，则对齐问题会得到修复：

Answer 1

由于您的复选框是＆＃39;如果不进行缩放，您可以在列表项中添加更多填充，并让图标位于填充中，以便左侧的文本不会干扰任何断点：

.list-group-item {
    padding-right: 40px;
}
.list-group-item i {
    position: absolute;
    right: 15px;
}

bootstrap list-group-item

1 个答案: