使基础柱内的元素占据全宽

Question

我需要像这样将img放在基础列中。

我的代码

                <div class="row"> 
                    <img src="/img/profile.jpg"  width="170">
                    <div class="large-4 columns">

                    </div>
                    <div class="large-8 columns">
                        <h3>Jaime Lannister</h3>
                    </div>
               </div>

此代码正确定位img，但当我将标记放在列外时，其他元素面临一些对齐问题。

如果标签放在列类中，这就是我得到的

代码

<div class="row"> 
                    <div class="large-4 columns">
                        <img src="/img/profile.jpg"  width="170">
                    </div>
                    <div class="large-8 columns">
                        <h3>Jaime Lannister</h3>
                    </div>
               </div>

您可以看到图像略微向右移动，左侧留有间隙。

在检查铬时，这就是我得到的

我尝试更改边距和填充，但没有任何帮助。知道底层问题是什么？

Answer 1

解决了问题。

只需将margin-left：0添加到row并填充左边：0添加到列

Answer 2

您还可以在行{div collapse

上使用名为<div class="row collapse">的类

这将删除子列中的所有填充。这样，如果您希望您的网站响应，您就不会弄乱网格结构！