


How to force a single line to display and add horizontal scroll bars after the span value of Element-UI el-col component exceeds 24?
Apr 05, 2025 pm 05:39 PM el-col
component of Element-UI will automatically wrap when the sum of span
attribute values ??exceeds 24. If you need to force a single line to display and add horizontal scroll bars, you need to abandon the default layout of el-row
and el-col
components and use the Flexbox layout instead.
The core problem lies in the default line wrapping behavior of the el-row
component. To solve this problem, we set the container containing the el-col
component to the Flex layout and disable line breaks, thus enabling forced single-line display. Also, use overflow-x: auto
attribute to add horizontal scrollbars to view content beyond the width of the container.
Here is a modified code example:
<template> <div style="display: flex; overflow-x: auto;"> <div class="el-col-wrapper"> <el-col :span="8"><div class="grid-content bg-purple">8</div></el-col> <el-col :span="8"><div class="grid-content bg-purple-light">8</div></el-col> <el-col :span="8"><div class="grid-content bg-purple">8</div></el-col> <el-col :span="8"><div class="grid-content bg-purple-light">8</div></el-col> <el-col :span="8"><div class="grid-content bg-purple">8</div></el-col> <el-col :span="8"><div class="grid-content bg-purple-light">8</div></el-col> </div> </div> </template> <style scoped> .bg-purple { background: #d3dce6; } .bg-purple-light { background: #e5e9f2; } .grid-content { border-radius: 4px; height: 30px; display: flex; justify-content: center; /* 居中顯示數(shù)字 */ align-items: center; /* 居中顯示數(shù)字 */ padding: 0 10px; /* 添加內(nèi)邊距 */ } .el-col-wrapper { display: flex; } </style>
In this example, we remove the el-row
component and use a div
as a container to apply display: flex
and overflow-x: auto
styles. el-col
component is still used to set the column width, but they are now arranged horizontally in a Flex container, and there is no line wrapping even if the sum of span
values ??exceeds 24. Added .grid-content
style to center the content and add inner margins to make the content easier to read. Through this method, the problem of force a single line to be displayed and horizontal scroll bars after span
value of el-col
component exceeds 24 can be solved effectively.
The above is the detailed content of How to force a single line to display and add horizontal scroll bars after the span value of Element-UI el-col component exceeds 24?. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

There are many ways to center Bootstrap pictures, and you don’t have to use Flexbox. If you only need to center horizontally, the text-center class is enough; if you need to center vertically or multiple elements, Flexbox or Grid is more suitable. Flexbox is less compatible and may increase complexity, while Grid is more powerful and has a higher learning cost. When choosing a method, you should weigh the pros and cons and choose the most suitable method according to your needs and preferences.

There are four ways to adjust the WordPress article list: use theme options, use plugins (such as Post Types Order, WP Post List, Boxy Stuff), use code (add settings in the functions.php file), or modify the WordPress database directly.

ABI compatibility in C refers to whether binary code generated by different compilers or versions can be compatible without recompilation. 1. Function calling conventions, 2. Name modification, 3. Virtual function table layout, 4. Structure and class layout are the main aspects involved.

Yes, H5 page production is an important implementation method for front-end development, involving core technologies such as HTML, CSS and JavaScript. Developers build dynamic and powerful H5 pages by cleverly combining these technologies, such as using the <canvas> tag to draw graphics or using JavaScript to control interaction behavior.

Overview: There are many ways to center images using Bootstrap. Basic method: Use the mx-auto class to center horizontally. Use the img-fluid class to adapt to the parent container. Use the d-block class to set the image to a block-level element (vertical centering). Advanced method: Flexbox layout: Use the justify-content-center and align-items-center properties. Grid layout: Use the place-items: center property. Best practice: Avoid unnecessary nesting and styles. Choose the best method for the project. Pay attention to the maintainability of the code and avoid sacrificing code quality to pursue the excitement

How to use JavaScript or CSS to control the top and end of the page in the browser's printing settings. In the browser's printing settings, there is an option to control whether the display is...

Compatibility issues of multi-row overflow on mobile terminal omitted on different devices When developing mobile applications using Vue 2.0, you often encounter the need to overflow text...

The size of a Bootstrap list depends on the size of the container that contains the list, not the list itself. Using Bootstrap's grid system or Flexbox can control the size of the container, thereby indirectly resizing the list items.
