2017-10-22 3 views
0

내가 웹 사이트를 가지고 있고, 한 페이지에 난이 있습니다COL 및 ROW 반응성

ON PC

On tablet

두 번째 이미지는 태블릿 당신이 볼 수 있듯이에 보이는 방법이다, 태블릿에서 잘 어울리지 않습니다. 나는

<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%; 
} 

답변

1

헤이 내가 이런 식으로 고정 ... 그 해결 방법을 찾을 수 없습니다 :

<div class="container"> 
 
      <div class="" style="padding-left: 5%"> 
 
      <h2>Practice areas</h2> 
 
      <hr style="margin-bottom:5px"> 
 
      <div class="row clearleft"> 
 
\t \t \t <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> 
 
\t \t \t <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> 
 
\t \t \t <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> 
 
\t \t \t <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> 
 
\t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="row clearleft"> 
 
\t \t \t \t <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> 
 
\t \t \t <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> 
 
\t \t \t <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>

+0

당신은 무엇을 변경 했습니까? –

+0

상표를 사용하는 교통 시스템 변경 왜냐하면 나는 정확한 순서로 그들을 필요로한다. –

+0

나는 first class = "col-xs-12 col-sm-6 col-lg-3"-> height : 573px; @media (최대 너비 : 991px) 및 (최소 너비 : 768px) style.css : 22494 .row .col-sm-6 : nth-child (n + 3) { 여백 : 45px; float : right;} –

관련 문제