Question

我正在处理模板，我的代码看起来像这样。它看起来我想要看起来，但我不知道它是否可以技术说话..需要一些提示：

<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

看起来没问题，除了所有no-padding都会消除正常的Bootstrap装订线（列之间的空间）。此外，嵌套列应包装在另一行中。来自Bootstrap docs

内容应放在列中，并且只能列行的直接孩子。

最后img不应该col-xs-4。将其放在一列中。通常，网格col-*用于块元素，如DIV html标记。它不应该是其他具有其他样式的元素（h2，p等等）

<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

在任何地方使用col-xs- *是一个好习惯吗？

1 个答案: