vue el-row spacing problem

vue el-row mid-ul spacing

Using the ul tag in el-row, you can adjust the spacing by adding a style like margin: 0 20px; to ul.

For example:

.my-ul {
  margin: 0 20px;
}

Then use this class in the template:

&lt;el-row&gt;
  &lt;ul class="my-ul"&gt;
    &lt;!-- List items --&gt;
  &lt;/ul&gt;
&lt;/el-row&gt;

This way, the spacing of the ul tags can be adjusted in el-row.

el-row's gutter precautions

<el-row :gutter=20>
	<el-col :span=8></el-col>
	<el-col :span=8></el-col>
	<el-col :span=8></el-col>
</el-row>

Notice:

Gutter will increase the container width of el-row by 20px, because there are margin-left:-10px and margin-right:-10px, which may cause horizontal scroll bars to appear during full screen width.

Overflow:hidden can be set in the el-row parent element;

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.