html - COL 和 ROW 响应

Question

我有一个网站，在一个页面上我有这个:

第二张图是在平板电脑上的样子 如您所见，它在平板电脑上看起来不太好。我不知道如何解决这个问题......

<div class="row clearleft">
          <div class="col-xs-12 col-sm-6 col-lg-3">
            <div class="thumbnail thumbnail-mod-2"><img 
             src="images/services-3.jpg" alt="">
              <div class="caption-mod-1">
                <h44>Text</h44>
                <p class="text-white">TEXT</p>
              </div>
            </div>
          </div>

CSS

* + .row {
margin-top: 10px;
}

.row {
margin-left: -15px;
margin-right: -15px;
}

@media (min-width: 1200px)
style.css:3006
.col-lg-3 {
width: 25%;
}

Answer 1

嘿，我是这样修复的:

<div class="container">
          <div class="" style="padding-left: 5%">
            <h2>Practice areas</h2>
            <hr style="margin-bottom:5px">
            <div class="row clearleft">
			  <div class="col-xs-12 col-sm-6 col-lg-3">
                <div class="thumbnail thumbnail-mod-2"><img src="images/services-3.jpg" alt="">
                  <div class="caption-mod-1">
                    <h44>Real Estate Transactions &amp; Closings</h44>
                    <p class="text-white">Protect your biggest investment, your home. When you buy or sell a house, you need to make sure that you understand the risks associated with a home sale or purchase, you know the condition the house is in, you protect it from creditors, and that you negotiate all available credits. We provide exceptional service, fast closings and competitive prices.  You will always speak with our attorneys, not secretaries. Call us today for the best price of a closing.</p>
                  </div>
                </div>
              </div>
			  <div class="col-xs-12 col-sm-6 col-lg-3" style="
    height: 573px;
">
                <div class="thumbnail thumbnail-mod-2"><img src="images/injury.jpg" alt="">
                  <div class="caption-mod-1">
                    <h44>Personal Injury &amp; Car Accidents</h44>
                    <p class="text-white">Accidents happen every day. Be prepared to take proper action when injured to preserve your rights. Don’t delay. We work diligently to keep persons at fault accountable. You deserve to be compensated for your injury, bills, and pain &amp; suffering endured.</p>
                  </div>
                </div>
              </div>
			  <div class="col-xs-12 col-sm-6 col-lg-3" style="
    float: right;
">
                <div class="thumbnail thumbnail-mod-2"><img src="images/traffic.jpg" alt="">
                  <div class="caption-mod-1">
                    <h44>Traffic Tickets</h44>
                    <p class="text-white">We all make mistakes. We can minimize your liability in speeding tickets, failure to yield, squealing tires, cell phone usage, and in disobeying a traffic light violations. We have competitive prices.</p>
                  </div>
                </div>
              </div>
			  <div class="col-xs-12 col-sm-6 col-lg-3" style="float: right;">
                <div class="thumbnail thumbnail-mod-2"><img src="images/gallery-7.jpg" alt="">
                  <div class="caption-mod-1">
                    <h44>Trademarks</h44>
                    <p class="text-white">Protect your name, your design. We specialize in registering trademarks with the U.S. and European Trademark Office.  We offer competitive prices.</p>
                  </div>
                </div>
				</div>
				</div>
				<div class="row clearleft">
				<div class="col-xs-12 col-sm-6 col-lg-3">
                <div class="thumbnail thumbnail-mod-2"><img src="images/construct.jpg" alt="">
                  <div class="caption-mod-1">
                    <h44>Construction Law &amp; Liens</h44>
                    <p class="text-white">You must act in timely manner. Whether you are the owner, general contractor or subcontractor, we can help you take the right steps to protect what you are owed. We specialize in mechanics lien actions, defective work disputes, and extra work orders.</p>
                  </div>
                </div>
              </div>
			  <div class="col-xs-12 col-sm-6 col-lg-3">
                <div class="thumbnail thumbnail-mod-2"><img src="images/bus.jpg" alt="">
                  <div class="caption-mod-1">
                    <h44>Business Planning</h44>
                    <p class="text-white">Not sure what kind of a corporation you should open? Let us help you decide. We will explain the benefits and downside of each and help you set up the right one for you. We will draft all necessary operating agreements, shareholders’ agreements, bylaws, partnership agreements and related documents.</p>
                  </div>
                </div>
              </div>
			  <div class="col-xs-12 col-sm-6 col-lg-3">
                <div class="thumbnail thumbnail-mod-2"><img src="images/gallery-5.jpg" alt="">
                  <div class="caption-mod-1">
                    <h44>Contract Drafting &amp; Negotiations</h44>
                    <p class="text-white">Eliminate surprises, expect the unexpected, and protect yourself. Let us help you make sure you understand your rights and obligations under a contract before you sign it.  We can help you draft agreements that protect your interests and minimize your risks. Call us today.</p>
                  </div>
                </div>
              </div>
              <div class="col-xs-12 col-sm-6 col-lg-3">
                <div class="thumbnail thumbnail-mod-2"><img src="images/labor.jpg" alt="">
                  <div class="caption-mod-1">
                    <h44>Labor Law</h44>
                    <p class="text-white">As a business owner you have to comply with many state and potentially federal labor laws. Let us help you protect your business by educating you, drafting appropriate employment, non-compete, confidentiality and non-disclosure agreements.  We also defend employers in minimum wage, overtime and prevailing wage claims by employees. Understanding minimum labor requirements eliminates costly mistakes. Call us today.</p>
                  </div>
                </div>
              </div>
              </div>
            </div>
        </div>