html - 我想分开 html 和 css 但出了点问题

Question

<div class="col-md-12" style="">
<div class="col-md-4 linkdetail" class="cursor">
    <div class="col-md-12" style="margin-bottom:40px">
        <img src="/img/product3.png" style="display:inline-block;width:100%;">
    </div>
    <div class="col-md-12" style="margin-bottom:15px">
        <img src="/img/100G_ITAEWON 565 Copy.png" style="display:inline-block;">
    </div>
    <div class="col-md-12" style="margin-bottom:30px">
        <img src="/img/$ 24.5 copy.png" style="display:inline-block;">
    </div>
</div>
<div class="col-md-4 linkdetail" class="cursor">
    <div class="col-md-12" style="margin-bottom:40px">
        <img src="/img/product3.png" style="display:inline-block;width:100%;">
    </div>
    <div class="col-md-12" style="margin-bottom:15px">
        <img src="/img/100G_ITAEWON 565 Copy.png" style="display:inline-block;">
    </div>
    <div class="col-md-12" style="margin-bottom:30px">
        <img src="/img/$ 24.5 copy.png" style="display:inline-block;">
    </div>
</div>
<div class="col-md-4 linkdetail" class="cursor">
    <div class="col-md-12" style="margin-bottom:40px">
        <img src="/img/product3.png" style="display:inline-block;width:100%;">
    </div>
    <div class="col-md-12" style="margin-bottom:15px">
        <img src="/img/100G_ITAEWON 565 Copy.png" style="display:inline-block;">
    </div>
    <div class="col-md-12" style="margin-bottom:30px">
        <img src="/img/$ 24.5 copy.png" style="display:inline-block;">
    </div>
</div>
</div>

以上代码为html+css内联源码。但是我想把html和css分开。所以，我编辑了这段代码，见下文。

PS我已经修改过了，但是我觉得html，css都不好。如何修复有效的源代码？

这段代码有什么问题？

.cursor             { cursor:pointer; }
.first-gap          { margin-bottom:38px; }
.second-gap         { margin-bottom:36px; }
.third-gap          { margin-bottom:38px; }
.word-word-gap      { margin-bottom:15px; }
.gap                { margin-bottom:95px; }
.reactive           { display:inline-block;width:100%; }
#section>.first-one { min-height:592px; }

<div class="col-md-12" class="first-one">
<div class="col-md-6 linkdetail" class="cursor">
    <div class="col-md-12 first-gap reactive">
        <img src="/img/product1.png">
    </div>
    <div class="col-md-12 word-word-gap">
        100G_ITAEWON 565
    </div>
    <div class="col-md-12 gap">
        $ 24.5
    </div>
</div>
<div class="col-md-6 linkdetail" class="cursor">
    <div class="col-md-12 first-gap reactive">
        <img src="/img/product2.png">
    </div>
    <div class="col-md-12 word-word-gap">
        100G_ITAEWON 565
    </div>
    <div class="col-md-12 gap">
        $ 24.5
    </div>
</div>
</div>

Answer 1

我认为您正在使用 Bootstrap 。您应该为它导入 CDN。您可以引用此站点以获取引导 CDN。希望对你有帮助Bootstrap CDN