Es ist eine gute Praxis, col-xs- * überall zu verwenden?

Question

Ich arbeite an einer Vorlage und mein Code sieht in etwa so aus. Es sieht aus wie ich aussieht wollen, aber ich weiß nicht, ob es in Ordnung technische sprechen ist .. einige Tipps brauchen:

<div class="row"> 
    <div class="col-xs-5 padding-box-product-image margin-image-product"> 
     <div class="pic-box-product"> 
      <img class="img-upload img-responsive" src="srcimg.png" /> 
     </div> 
    </div> 

    <div class="col-xs-7 width-content-product"> 
     <div class="col-xs-12 no-padding-left"> 
      <h2 class="col-xs-7 no-margin no-padding line-height-product title-product">Ttesta</h2> 
      <p class="col-xs-5 no-margin dots-product-page line-height-product ">&#9679; &#9679; &#9679;</p> 
      <p class="col-xs-12 no-margin no-padding line-height-product subtitle-product">Xytzadwa </p> 
      <p class="col-xs-12 no-margin no-padding line-height-product date-product">My test</p> 
      <div class="col-xs-12 decoration decoration-margins-product-first"></div> 
      <img class="col-xs-4 img-responsive" src="/images/icon.png" /> 
     </div> 

    </div> 
</div> 

Answer 1

Es sieht ok, außer all den no-padding wird die normale Bootstrap Rinne (Raum zwischen elimnate Säulen). Außerdem sollten die verschachtelten Spalten in eine andere Zeile eingeschlossen werden. Vom Bootstrap docs

Inhalt soll innerhalb von Spalten platziert werden, und nur die Spalten unmittelbare Kinder der Zeilen sein können.

Die letzte img sollte col-xs-4 nicht haben. Platziere es stattdessen in einer Spalte. Im Allgemeinen ist das Gitter col-* für Blockelemente wie das DIV-HTML-Tag. Es sollte nicht für andere Elemente sein, die anderen Stile (h2, p, etc ..)

<div class="row"> 
     <div class="col-xs-5 padding-box-product-image margin-image-product"> 
      <div class="pic-box-product"> 
       <img class="img-upload img-responsive" src="//placehold.it/900x500"> 
      </div> 
     </div> 
     <div class="col-xs-7 width-content-product"> 
      <div class="row"> 
       <div class="col-xs-12"> 
        <div class="row"> 
         <div class="col-xs-7"><h2 class="line-height-product title-product">Ttesta</h2></div> 
         <div class="col-xs-5"><p class="dots-product-page line-height-product ">● ● ●</p></div> 
         <div class="col-xs-12"><p class="line-height-product subtitle-product">Xytzadwa </p></div> 
         <div class="col-xs-12"><p class="line-height-product date-product">My test</p></div> 
         <div class="col-xs-12 decoration decoration-margins-product-first"></div> 
         <div class="col-xs-4"><img class="img-responsive" src="//placehold.it/70"></div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

http://www.codeply.com/go/hOXVBXdb5B