html - 在 Bootstrap 中做出响应的最佳方法是什么？

Question

所以我有一个布局，我想根据设备在 Bootstrap 中做出响应。我想知道的是如何以图像中显示的方式执行它。我试过使用表格单元格和 Bootstrap 列/行但无济于事。

我希望 availability 和 Link 1 上方的元素落在单词的左侧。我该怎么做？

这是我的 HTML 和 CSS:

<div class="col-md-12" style="border:black solid 1px;">
    <div class="row vertical-align">
        <div class="col-sm-2">
            <div class="row">
                <div style="padding:5px;" class="col-xs-4">
                    <input style="margin:40px 0 0;" class="form-inline form-control" type="checkbox" />
                </div>
                <div class="col-xs-8">
                    <img class="img-responsive" src="https://img-new.cgtrader.com/items/109741/84b639735c/human-stylized-head-bust-base-3d-model-ztl.jpg" />
               </div>
           </div>
        </div>
        <div class="col-sm-3">
            <div class="row">
                <div class="col-xs-12">
                    <div><strong>Name：</strong>Bob</div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div><strong>Agency：</strong>AFDM</div>
               </div>
           </div>
        </div>
        <div class="col-sm-3">
            <div class="row">
                <div class="col-xs-12">
                    <div><strong>Stack：</strong>ADCM</div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div><strong>Grade：</strong>C</div>
               </div>
           </div>
        </div>
        <div class="col-sm-1">
            <div class="row">
                <div class="col-xs-12">
                    <div class="led-red-trans"></div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <strong>Available</strong>
               </div>
           </div>
        </div>
        <div class="col-sm-1">
                <div class="row">
                <div class="col-xs-12">
                    <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <strong>Link</strong>
               </div>
           </div>
        </div>
        <div class="col-sm-2">
                    <div class="row">
                <div class="col-xs-12">
                    <a data-toggle="collapse" href="#collapseme"><span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></a>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <strong>More</strong>
               </div>
           </div>
        </div>
     </div>
     <div class="row">
         <div class="col-sm-12">
             <div id="collapseme" class="panel-collapse collapse">
                  <ul class="list-group">
                    <li class="list-group-item">One</li>
                    <li class="list-group-item">Two</li>
                    <li class="list-group-item">Three</li>
                  </ul>
                </div>
            </div>
     </div>
</div>

CSS:

.vertical-align {
  display: flex;
  align-items: center;
}   

.led-red-trans {
  margin: 0 auto;
  width: 24px;
  height: 24px;
  background-color: #F00;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 12px;
}

  /* Large Devices, Wide Screens */
    @media (min-width : 1200px) {
        .vertical-align {
            display: flex;
            align-items: center;
        }   
    }

    /* Medium Devices, Desktops */
    @media (min-width : 992px) and (max-width : 1199px) {

        .vertical-align {
            display: flex;
            align-items: center;
        }   
    }

    /* Small Devices, Tablets */
    @media (max-width : 768px) and (max-width : 991px) {
        .vertical-align {
            display: flex;
            align-items: center;
        }   

    }

    /* Extra Small Devices, Phones */ 
    @media (max-width : 767px) {

        .vertical-align {
            display: block;
            align-items: center;
        }   

    }

    /* Custom, iPhone Retina */ 
    @media (max-width : 480px) {

        .vertical-align {
            display: block;
            align-items: center;
        }   

    }

还有一个 CODEPEN: http://codepen.io/nilerafter24/pen/VPYpqq

Answer 1

这将帮助您使用纯 Bootstrap 类。

<div class="col-md-12" style="border:black solid 1px;">
    <div class="row vertical-align">
        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
            <div class="row">
                <div style="padding:5px;" class="col-xs-4">
                    <input style="margin:40px 0 0;" class="form-inline form-control" type="checkbox" />
                </div>
                <div class="col-xs-8">
                    <img class="img-responsive" src="https://img-new.cgtrader.com/items/109741/84b639735c/human-stylized-head-bust-base-3d-model-ztl.jpg" />
               </div>
           </div>
        </div>
        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
            <div class="row">
                <div class="col-xs-12 col-lg-6">
                    <div><strong>Name：</strong>Bob</div>
                </div>
            <div class="col-xs-12 col-lg-6" >
                    <div><strong>Stack：</strong>ADCM</div>
                </div>

           </div>

            <div class="row">

            <div class="col-xs-12 col-lg-6">
                    <div><strong>Agency：</strong>AFDM</div>
               </div>
                <div class="col-xs-12 col-lg-6">
                    <div><strong>Grade：</strong>C</div>
               </div>
           </div>
        </div>
        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
            <div class="row">
                <div class="col-xs-6 col-lg-6 col-sm-6 col-md-6">
                    <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
                </div>
                <div class="col-xs-6 col-lg-6 col-sm-6 col-md-6">
                    <span class="glyphicon glyphicon-lamp" aria-hidden="true"></span>
                </div>

                <div class="col-xs-6 col-lg-6 col-sm-6 col-md-6">
                    <strong>Available</strong>
                </div>

                <div class="col-xs-6 col-lg-6 col-sm-6 col-md-6">
                    <strong>Link</strong>
                </div>
            </div>
        </div>
     </div>
     <div class="row">
         <div class="col-sm-12">
             <div id="collapseme" class="panel-collapse collapse">
                  <ul class="list-group">
                    <li class="list-group-item">One</li>
                    <li class="list-group-item">Two</li>
                    <li class="list-group-item">Three</li>
                  </ul>
                </div>
            </div>
     </div>
</div>