HTML/CSS使列宽达到100%

Question

当我使用of sm- 12制作列，并在列12中添加of lg-3和of sm-9时，我遇到了这个问题，当of lg-3没有内容时，of sm-9不会占用容器的100%宽度。

<hr style="border-color: darkgray;">
<div class="col-sm-12">
    <h4><a id="homeAnnTitle" href="[LINK]">[TITLE]</a></h4>
    <div class="row">
        <div id="homeAnnImg" class="col-lg-3 col-md-2 hidden-sm">[IMAGE]</div>
        <div class="col-sm-9" style="padding: 0 15px 0 15px;">
            [SUMMARY]
        </div>
        <div class="clearfix"></div>
        <div align="right">
            <button 
                style="
                width: 100px; 
                height: 35px; 
                border-radius: 5px;
                background-color: #e44726; 
                text-align: center;
                border: none;" 

                id="readMoreBtn" 
                type="button">
                    <a href="[LINK]" 
                        style="
                        text-decoration: none;
                        color: white;">Read More ></a>
            </button>
        </div>
    </div>
    
</div>
<br>

如果col lg-3没有内容，col 9有100%的宽度，我该怎么做呢？

Answer 1

我认为你可以创建一个脚本来验证col lg-3是否没有内容，将col 9转换成col 12whit javascript。我是prog jr，我对js了解不多，但我认为你可以这样做。你的需要，只能用一个脚本来做。

Answer 2

我同意João Gonçalves的观点！但是，您也可以将其转换为'w-100‘以使列宽度达到页面的100%，或者使用' col -auto’来允许页面自动调整自身。仅供参考，使用w-100时要小心，因为它的行为习惯就像表格中的换行符，但如果列中有内容，它应该完全没有问题。