ਬੂਟਸਟਰੈਪ 5.3 ਵਿੱਚ ਪ੍ਰਤਿਕ੍ਰਿਆ ਕਰਨ ਵਾਲੇ ਕਾਲਮ ਰੈਪਿੰਗ
ਬੂਟਸਟਰੈਪ 5.3 ਜਵਾਬਦੇਹ ਡਿਜ਼ਾਈਨ ਬਣਾਉਣ ਲਈ ਇਕ ਸ਼ਕਤੀਸ਼ਾਲੀ ਸੰਦ ਹੈ, ਪਰ ਕਈ ਵਾਰ ਉਮੀਦਵਾਰ ਅਨੁਮਾਨਤ ਵਿਵਹਾਰ ਨਹੀਂ ਕਰਦੇ. ਜੇ ਤੁਸੀਂ ਬੂਟਸਟਰੈਪ ਲਈ ਨਵੇਂ ਹੋ, ਤਾਂ ਸ਼ਾਇਦ ਤੁਹਾਨੂੰ ਕੋਈ ਮੁੱਦਾ ਮਿਲਿਆ ਹੋ ਸਕਦਾ ਹੈ ਜਿੱਥੇ "ਡਬਲਯੂ -100 ਡੀ-ਬਲਾਕ ਡੀ-ਐਮਡੀ-ਕੋਈ ਨਹੀਂ" ਕਲਾਸ ਉਮੀਦ ਅਨੁਸਾਰ ਕਾਲਮ ਨੂੰ ਤੋੜਨਾ ਨਹੀਂ ਜਾਪਦਾ. 🤔
ਤੁਸੀਂ ਇਕੱਲੇ ਨਹੀਂ ਹੋ! ਬਹੁਤ ਸਾਰੇ ਸ਼ੁਰੂਆਤੀ ਫਲੈਕਸਬੌਕਸ-ਅਧਾਰਤ ਗਰਿੱਡ ਵਿਵਹਾਰ ਨਾਲ ਸੰਘਰਸ਼ ਅਤੇ ਬੂਟਸਟਰੈਪ ਕਾਲਮ ਰੈਪਿੰਗ ਨੂੰ ਹੈਂਡਲ ਕਰਦਾ ਹੈ. ਘੋਲ ਹਮੇਸ਼ਾਂ ਸਿੱਧਾ ਨਹੀਂ ਹੁੰਦਾ, ਕਿਉਂਕਿ ਕੁਝ ਬੂਟਸੈਟਰੇਪ ਸਹੂਲਤਾਂ ਦੀਆਂ ਕਲਾਸਾਂ ਉਨ੍ਹਾਂ ਦੇ ਪ੍ਰਸੰਗ ਦੇ ਅਧਾਰ ਤੇ ਵੱਖਰੇ ਵੱਖਰੇ squict ੰਗ ਨਾਲ ਗੱਲਬਾਤ ਕਰਦੀਆਂ ਹਨ.
ਕਲਪਨਾ ਕਰੋ ਕਿ ਤੁਸੀਂ ਇੱਕ ਚਿੱਤਰ ਗੈਲਰੀ ਨੂੰ ਡਿਜ਼ਾਇਨ ਕਰ ਰਹੇ ਹੋ ਜਿਥੇ ਹਰੇਕ ਚਿੱਤਰ ਲੈਂਦਾ ਹੈ ਮੀਡੀਅਮ ਅਤੇ ਵੱਡੇ ਸਕ੍ਰੀਨਾਂ ਤੇ 4 ਕਾਲਮ ਪਰ ਚਾਹੀਦਾ ਹੈ ਛੋਟੀਆਂ ਸਕ੍ਰੀਨਾਂ ਤੇ 12 ਕਾਲਮ ਫੈਲਾਓ. ਤੁਸੀਂ ਇੱਕ ਲਾਈਨ ਬਰੇਕ ਨੂੰ ਜ਼ਬਰਦਸਤੀ ਕਰਨ ਲਈ "ਡਬਲਯੂ -100" ਡਿਵ ਦੀ ਉਮੀਦ ਕਰਦੇ ਹੋ, ਪਰ ਸਕ੍ਰੀਨ ਨੂੰ ਮੁੜ ਆਕਾਰ ਦੇਣਾ ਯੋਜਨਾਬੱਧ ਅਨੁਸਾਰ ਵਿਵਹਾਰ ਨਹੀਂ ਕਰਦਾ. ਇਹ ਕਿਉਂ ਹੋ ਰਿਹਾ ਹੈ? 🤷♂️
ਇਸ ਲੇਖ ਵਿਚ, ਅਸੀਂ ਗੋਤਾਖੋਰਾਂ ਵਿਚ ਗੋਤਾਖੋਰੀ ਕਰਾਂਗੇ ਕਿ ਇਹ ਮੁੱਦਾ ਕਿਉਂ ਹੁੰਦਾ ਹੈ ਅਤੇ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਹੱਲਾਂ ਦੀ ਪੜਚੋਲ ਕਰਾਂਗਾ. ਅੰਤ ਤੱਕ, ਤੁਸੀਂ ਬਿਨਾਂ ਅਚਾਨਕ ਪ੍ਰਦਰਸ਼ਿਤ ਡਿਸਪਲੇਅ ਮੁੱਦਿਆਂ ਤੋਂ ਤੁਹਾਡੇ ਬੂਟਸਟਰੈਪ ਲੇਆਉਟ ਨੂੰ ਭਰੋਸੇ ਨਾਲ suppropriate ੰਗ ਨਾਲ .ੰਗ ਨਾਲ .ੰਗ ਨਾਲ .ੰਗ ਨਾਲ ਬਣ ਸਕੋਗੇ. ਆਓ ਸ਼ੁਰੂ ਕਰੀਏ! 🚀
| ਕਮਾਂਡ | ਵਰਤੋਂ ਦੀ ਉਦਾਹਰਣ |
|---|---|
| flex-basis | ਇੱਕ ਫਲੈਕਸ ਆਈਟਮ ਦੇ ਸ਼ੁਰੂਆਤੀ ਆਕਾਰ ਨੂੰ ਪਰਿਭਾਸ਼ਤ ਕਰਨ ਜਾਂ ਸੁੰਗੜਨ ਤੋਂ ਪਹਿਲਾਂ ਸੀਐਸਐਸ ਵਿੱਚ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ. ਇਸ ਸਥਿਤੀ ਵਿੱਚ, ਫਲੇਕਸ-ਅਧਾਰ: 100%; ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰਦਾ ਹੈ ਕਿ ਤੱਤ ਕਤਾਰ ਦੀ ਪੂਰੀ ਚੌੜਾਈ ਲੈਂਦਾ ਹੈ. |
| window.innerWidth | ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਜਾਇਦਾਦ ਜੋ ਬ੍ਰਾ browser ਜ਼ਰ ਵਿੰਡੋ ਦੀ ਚੌੜਾਈ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ. ਇਹ ਆਰਜੀ ਤੌਰ ਤੇ ਸਕਰੀਨ ਅਕਾਰ ਨਿਰਧਾਰਤ ਕਰਨ ਵਿੱਚ ਸਹਾਇਤਾ ਕਰਦਾ ਹੈ ਅਤੇ ਜਵਾਬਦੇਹ ਵਿਵਹਾਰ ਨੂੰ ਲਾਗੂ ਕਰਦਾ ਹੈ. |
| querySelectorAll() | ਜਾਵਾ ਸਕ੍ਰਿਪਟ method ੰਗ ਜੋ ਨਿਰਧਾਰਤ CSS ਚੋਣਕਾਰ ਨਾਲ ਮੇਲ ਖਾਂਦਾ ਸਾਰੇ ਤੱਤ ਚੁਣਦਾ ਹੈ. ਕਈ ਵਾਰ ਕਈ ਐਲੀਮੈਂਟਸ ਲਈ ਕਾਲਮ-ਤੋੜ ਤਰਕ ਲਾਗੂ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ. |
| window.addEventListener("resize", ...) | ਬ੍ਰਾ browser ਜ਼ਰ ਦਾ ਮੁੜ ਆਕਾਰ ਦੇਣ ਲਈ ਅਤੇ ਜਦੋਂ ਸਕ੍ਰੀਨ ਦਾ ਆਕਾਰ ਬਦਲਦਾ ਹੈ ਤਾਂ ਖਾਕਾ ਨੂੰ ਆਰਜੀ ਤੌਰ ਤੇ ਵਿਵਸਥਿਤ ਕਰਨ ਲਈ ਇੱਕ ਫੰਕਸ਼ਨ ਨੂੰ ਚਾਲੂ ਕਰਦਾ ਹੈ. |
| document.addEventListener("DOMContentLoaded", ...) | ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰਦਾ ਹੈ ਕਿ ਡੋਮ ਐਲੀਮੈਂਟਸ ਨੂੰ ਹੇਰਾਫੇਰੀ ਕਰਨ ਵੇਲੇ ਗਲਤੀਆਂ ਨੂੰ ਰੋਕਣ ਲਈ ਇੱਕ ਸਕ੍ਰਿਪਟ ਪੂਰੀ ਤਰ੍ਹਾਂ ਲੋਡ ਹੁੰਦੀ ਹੈ, ਰੋਕਣ ਵਾਲੇ ਐਚਟੀਐਮਐਲ ਦਸਤਾਵੇਜ਼ ਦੀ ਰੋਕਥਾਮ ਤੋਂ ਬਾਅਦ ਹੀ ਚਲਾਉਂਦੀ ਹੈ. |
| foreach ($images as $index => $img) | ਪੀਐਚਪੀ ਲੂਪ ਜੋ ਚਿੱਤਰਾਂ ਦੀ ਲੜੀ ਤੋਂ ਪਾਰ ਹੁੰਦਾ ਹੈ, ਗਤੀਸ਼ੀਲ ਕਾਲਮ structures ਾਂਚਿਆਂ ਤਿਆਰ ਕਰਨਾ. |
| if (($index + 1) % 3 !== 0) | ਇੱਕ ਕਾਲਮ ਤੋੜ-ਪਛਾਣ ਪਾਉਣ ਲਈ ਪੀਐਚਪੀ ਸ਼ਰਤ ਜਦੋਂ ਤੱਕ ਇਹ ਲਗਾਤਾਰ ਆਖਰੀ ਕਾਲਮ ਨਹੀਂ ਹੁੰਦਾ, ਸਹੀ ਰੈਪਿੰਗ ਵਿਵਹਾਰ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ. |
| class="d-block d-md-none w-100" | ਬੂਟਸਟਰੈਪ ਯੂਟਿਲਟੀ ਦੀਆਂ ਕਲਾਸਾਂ ਛੋਟੀਆਂ ਸਕ੍ਰੀਨਾਂ ਵਿੱਚ ਇੱਕ ਨਵੀਂ ਲਾਈਨ ਨੂੰ ਮਜਬੂਰ ਕਰਨ ਲਈ ਵਰਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ ਪਰ ਮੱਧਮ ਅਤੇ ਵੱਡੇ ਵਿ views ਪੋਰਟਾਂ ਵਿੱਚ ਲੁਕੀਆਂ ਰਹਿੰਦੀਆਂ ਹਨ. |
ਬੂਟਸਟਰੈਪ ਕਾਲਮ ਰੈਪਿੰਗ ਦੇ ਮੁੱਦਿਆਂ ਅਤੇ ਹੱਲਾਂ ਨੂੰ ਸਮਝਣਾ
ਬੂਟਸਟਰੈਪ 5.3 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ ਫਲੈਕਸਬਾਕਸ ਗਰਿੱਡ ਸਿਸਟਮ ਸਮੱਗਰੀ ਨੂੰ ਬਣਤਰ ਕਰਨ ਲਈ, ਅਤੇ ਜਦੋਂ ਕਿ ਇਹ ਜਵਾਬਦੇਹ ਡਿਜ਼ਾਇਨ ਲਈ ਸ਼ਕਤੀਸ਼ਾਲੀ ਟੂਲ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ, ਕੁਝ ਵਿਵਹਾਰ ਉਮੀਦ ਅਨੁਸਾਰ ਕੰਮ ਨਹੀਂ ਕਰ ਸਕਦੇ. ਨਾਲ ਮੁੱਦਾ "ਡਬਲਯੂ -100 ਡੀ-ਬਲਾਕ ਡੀ-ਐਮਡੀ-ਕੋਈ ਨਹੀਂ" ਇੱਕ ਫਲੈਕਸ ਕੰਟੇਨਰ ਦੇ ਅੰਦਰ ਬੂਟਸਟਰੈਪ ਹੈਂਡਲ ਹੈਂਡਸ ਦੇ ਹੈਂਡਲ ਬਰੇਕ ਦੇ ਹੈਂਡਲ ਤੋਂ ਆਇਆ ਹੈ. ਇਨ੍ਹਾਂ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ, ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਛੋਟੀਆਂ ਸਕ੍ਰੀਨਾਂ 'ਤੇ ਇਕ ਨਵੀਂ ਲਾਈਨ ਬਰੇਕ ਦੀ ਉਮੀਦ ਹੈ, ਪਰ ਫਲੈਕਸਬਾਕਸ structure ਾਂਚਾ ਕਈ ਵਾਰ ਇਸ ਨੂੰ ਹੋਣ ਤੋਂ ਰੋਕਦਾ ਹੈ. 🚀
ਪਹਿਲੀ ਪਹੁੰਚ ਨੇ ਇੱਕ ਕਸਟਮ CSS ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕਾਲਮ ਨੂੰ ਸਪਸ਼ਟ ਤੌਰ ਤੇ ਤੋੜ ਦਿੱਤੀ. ਅਰਜ਼ੀ ਦੇ ਕੇ ਫਲੈਕਸ-ਅਧਾਰ: 100%;, ਅਸੀਂ ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰਦੇ ਹਾਂ ਕਿ ਤੱਤ ਫਲੈਕਸ ਵਿਵਹਾਰ ਨੂੰ ਬਰਕਰਾਰ ਰੱਖਦੇ ਹੋਏ ਇੱਕ ਲਾਈਨ ਬਰੇਕ ਨੂੰ ਬਰੂਖਾ ਕਰਦਾ ਹੈ. ਇਹ ਵਿਧੀ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਹੈ ਕਿਉਂਕਿ ਇਹ ਬਰਾ browser ਜ਼ਰ ਨੂੰ ਦੱਸਦਾ ਹੈ ਕਿ ਐਲੀਮੈਂਟ ਨੂੰ ਹਮੇਸ਼ਾਂ ਦਿਸਦਾ ਹੈ. ਹਾਲਾਂਕਿ, ਜੇ ਬੂਟਸਟਰੈਪ ਦਾ ਡਿਫਾਲਟ ਸਟਾਈਲਿੰਗ ਦਖਲਅੰਦਾਜ਼ੀ, ਵਾਧੂ ਨਿਯਮ ਵਰਗੇ ਡਿਸਪਲੇਅ: ਬਲਾਕ ਦੀ ਜ਼ਰੂਰਤ ਹੋ ਸਕਦੀ ਹੈ.
ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਦਾ ਹੱਲ ਆਰਜੀ ਤੌਰ 'ਤੇ ਜਾਂਚ ਕਰਕੇ ਕਾਲਮ ਬਰੇਕ ਲਾਗੂ ਕਰਦਾ ਹੈ ਵਿੰਡੋ ਇੰਟਰਨੈਟਵਿਧਥ. ਜੇ ਸਕ੍ਰੀਨ ਚੌੜਾਈ 768 ਪੀਐਕਸ (ਬੂਟਸਟਰੈਪ "ਐਮਡੀ" ਬਰੇਕ ਪੁਆਇੰਟ) ਤੋਂ ਘੱਟ ਹੈ, ਤਾਂ ਸਕ੍ਰਿਪਟ ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰਦੀ ਹੈ ਕਿ ਬਰੇਕ ਤੱਤ ਪ੍ਰਦਰਸ਼ਤ ਹੋਣਗੇ. ਇਹ ਲਾਜ਼ਮੀ ਤੌਰ 'ਤੇ ਲੋਡ ਕੀਤੀ ਗਈ ਸਮਗਰੀ ਨਾਲ ਨਜਿੱਠਣ ਵੇਲੇ ਇਹ ਲਾਭਦਾਇਕ ਹੁੰਦਾ ਹੈ ਜਿੱਥੇ ਸੀਐਸਐਸ-ਸਿਰਫ ਉਦੇਸ਼ ਸਹੀ ਤਰ੍ਹਾਂ ਲਾਗੂ ਨਹੀਂ ਹੋ ਸਕਦੇ. ਇਕ ਈ-ਕਾਮਰਸ ਦੀ ਵੈੱਬਸਾਈਟ ਦੀ ਕਲਪਨਾ ਕਰੋ ਜਿੱਥੇ ਉਤਪਾਦ ਸੂਚੀ ਗਤੀਸ਼ੀਲਤਾ ਨਾਲ ਲੋਡ ਹੁੰਦੇ ਹਨ - ਇਹ ਸਕ੍ਰਿਪਟ ਸਾਰੇ ਡਿਵਾਈਸਾਂ 'ਤੇ ਸਹੀ ਕਾਲਮ ਬਰੇਕ ਨੂੰ ਪ੍ਰਭਾਵਤ ਕਰਦੀ ਹੈ. 🛒
ਅੰਤ ਵਿੱਚ, php ਬੈਕਐਂਡ HTNML ਤਿਆਰ ਕਰਦਾ ਹੈ, ਜਿਸ ਵਿੱਚ ਬੂਟਸਟਰੈਪ ਕਲਾਸਾਂ ਪਾ ਰਿਹਾ ਹੈ. ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰਦਾ ਹੈ ਕਿ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਉੱਤੇ ਨਿਰਭਰ ਕੀਤੇ ਬਿਨਾਂ ਕਾਲਮ ਬਰੇਟਸ ਆਉਟਪੁੱਟ ਵਿੱਚ ਸਹੀ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ. ਇਹ ਤਕਨੀਕ ਸੀਐਮਐਸ-ਅਧਾਰਤ ਵੈਬਸਾਈਟਾਂ ਲਈ ਆਦਰਸ਼ ਹੈ ਜਿੱਥੇ ਸਮਗਰੀ ਸਰਵਰ ਵਾਲੇ ਪਾਸੇ ਤਿਆਰ ਹੁੰਦੀ ਹੈ. ਚਾਹੇ CSS, ਜਾਵਾ ਸਕ੍ਰਿਪਟ, ਜਾਂ ਪੀਐਚਪੀ ਦੀ ਵਰਤੋਂ ਕਰਦਿਆਂ, ਟੀਚਾ ਇਕੋ ਜਿਹਾ ਰਹਿੰਦਾ ਹੈ: ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰਨਾ ਕਿ ਜਵਾਬਦੇਹਤਾ ਅਤੇ ਵਰਤੋਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਬੂਟਸਟਰੈਪ ਦੇ ਫਲੇਕਸਬੌਕਸ ਗਰਿੱਡ ਸਨਮਾਨ ਕਰਦਾ ਹੈ.
ਬੂਟਸਟਰੈਪ 5.3 ਕਾਲਮ ਬਰੇਕਸ ਨੂੰ ਸੰਭਾਲਣਾ: ਕਿਉਂ "ਡਬਲਯੂ -100 ਡੀ-ਬਲਾਕ ਡੀ-ਐਮ ਡੀ - ਕੋਈ ਨਹੀਂ" ਅਸਫਲ ਨਹੀਂ ਹੁੰਦਾ?
ਫਰੰਟੈਂਡ ਦਾ ਹੱਲ: ਬੂਟਸਟਰੈਪ ਅਤੇ ਕਸਟਮ CSS ਦੀ ਵਰਤੋਂ ਕਰਨਾ
<style>.custom-break {flex-basis: 100%;height: 0;}</style><div class="row mt-1"><div class="col-12 col-md-4"><img class="img-fluid img-thumbnail"></div><div class="custom-break d-md-none"></div><div class="col-12 col-md-4"><img class="img-fluid img-thumbnail"></div><div class="custom-break d-md-none"></div><div class="col-12 col-md-4"><img class="img-fluid img-thumbnail"></div></div>
ਵਿਕਲਪਕ ਪਹੁੰਚ: ਗਤੀਸ਼ੀਲ ਕਾਲਮ ਬਰੇਕਾਂ ਲਈ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਫਿਕਸ
ਫਰੰਟੈਂਡ ਦਾ ਹੱਲ: ਆਰਜੀਕਲ ਤੌਰ ਤੇ ਬਰੇਕਪੁਆਇੰਟਸ ਲਾਗੂ ਕਰਨ ਲਈ ਜਾਵਾ ਸਕ੍ਰਿਪਟ
<script>function applyColumnBreaks() {let screenWidth = window.innerWidth;let breakElements = document.querySelectorAll(".column-break");breakElements.forEach(el => {el.style.display = screenWidth < 768 ? "block" : "none";});}window.addEventListener("resize", applyColumnBreaks);document.addEventListener("DOMContentLoaded", applyColumnBreaks);</script>
ਬੈਕਐਂਡ ਪਹੁੰਚ: php ਨਾਲ ਡਾਇਨਾਮਿਕ HTML ਪੇਸ਼ਕਾਰੀ
ਸਰਵਰ-ਸਾਈਡ ਦਾ ਹੱਲ: PHP ਨਾਲ ਮਨੀਆ ਦੇ ਕਾਲਮ ਤਿਆਰ ਕਰਨਾ
<?php$break_class = "d-block d-md-none w-100";$images = ["img1.jpg", "img2.jpg", "img3.jpg"];echo '<div class="row mt-1">';foreach ($images as $index => $img) {echo '<div class="col-12 col-md-4"><img src="' . $img . '" class="img-fluid img-thumbnail"></div>';if (($index + 1) % 3 !== 0) {echo '<div class="' . $break_class . '"></div>';}}echo '</div>';?>
ਗਰਿੱਡ ਉਪਯੋਗਤਾਵਾਂ ਨਾਲ ਬੂਟਸਟਰੈਪ ਕਾਲਮ ਜਵਾਬਦੇਹ ਨੂੰ ਵਧਾਉਣਾ
ਬੂਟਸਟਰੈਪ ਨਾਲ ਕੰਮ ਕਰਨ ਵੇਲੇ ਅਕਸਰ ਅਣਦੇਖੀ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਗਰਿੱਡ ਸਿਸਟਮ ਕਿਵੇਂ ਕਾਲਮ ਲਪੇਟਣਾ ਜਿਵੇਂ ਕਿ ਸਹੂਲਤ ਦੀਆਂ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ w-100 ਅਤੇ d-block. ਹਾਲਾਂਕਿ ਇਹ ਕਲਾਸ ਬਹੁਤ ਸਾਰੇ ਮਾਮਲਿਆਂ ਵਿੱਚ ਚੰਗੀ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰਦੇ ਹਨ, ਸ਼ਾਇਦ ਉਹ ਇੱਕ ਫਲੈਕਸ ਡੱਬੇ ਵਿੱਚ ਅਨੁਮਾਨਤ ਲਾਈਨ ਬਰੇਕ ਨਹੀਂ ਪੈਦਾ ਕਰਦੇ. ਇਹ ਉਦੋਂ ਹੁੰਦਾ ਹੈ ਕਿਉਂਕਿ ਬੂਟਸਟਰੈਪ ਦਾ ਕਤਾਰ ਅਤੇ ਕਾਲਮ ਸਿਸਟਮ 'ਤੇ ਅਧਾਰਤ ਹੈ ਫਲੈਕਸਬਾਕਸਭਾਵ ਕਾਲਮ ਇੱਕ ਨਵੀਂ ਲਾਈਨ ਨੂੰ ਤੋੜਨ ਦੀ ਬਜਾਏ ਉਪਲਬਧ ਜਗ੍ਹਾ ਦੇ ਅੰਦਰ ਫਿੱਟ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਨਗੇ.
ਕਿਸੇ ਕਾਲਮ ਨੂੰ ਸਹੀ ਤਰ੍ਹਾਂ ਫੜੀਨੀ ਤੌਰ ਤੇ ਲਪੇਟਣ ਲਈ, ਇਸ ਨੂੰ ਕਈ ਵਾਰ ਵਰਤਣ ਲਈ ਜ਼ਰੂਰੀ ਹੁੰਦਾ ਹੈ col-12 ਇਸ ਦੀ ਬਜਾਏ ਸਿਰਫ ਭਰੋਸਾ ਕਰਨਾ w-100. ਇਕ ਹੋਰ ਨਜ਼ਰਅੰਦਾਜ਼ ਵਿਧੀ ਵਰਤ ਰਹੀ ਹੈ order-* ਕਲਾਸਾਂ ਦੇ ਕ੍ਰਮ ਨੂੰ ਹੇਰਾਫੇਰੀ ਕਰਨ ਲਈ, ਸਹੀ ਪਲੇਸਮੈਂਟ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦੇ ਹੋਏ. ਉਦਾਹਰਣ ਦੇ ਲਈ, ਇੱਕ ਬਹੁ-ਕਾਲਮ ਗੈਲਰੀ ਵਿੱਚ, ਸਪਸ਼ਟ ਪਰਿਭਾਸ਼ਤ ਵਿੱਚ col-12 order-md-2 ਛੋਟੀਆਂ ਸਕ੍ਰੀਨਾਂ ਤੇ ਸਮਗਰੀ ਨੂੰ ਕੁਸ਼ਲਤਾ ਨਾਲ ਪੁਨਰ ਗਠਨ ਕੀਤੇ ਬਿਨਾਂ ਬਿਨਾਂ ਕਿਸੇ ਵਾਧੂ ਡਿਵ ਐਲੀਮੈਂਟਸ ਦੀ ਜ਼ਰੂਰਤ.
ਇਕ ਹੋਰ ਪਹੁੰਚ ਜੋ ਕੰਮ ਕਰ ਸਕਦੀ ਹੈ ਜਦੋਂ ਚਿੱਤਰ ਗੈਲਰੀਆਂ ਜਾਂ ਕਾਰਡ-ਅਧਾਰਤ ਖਾਕਾ ਨਾਲ ਨਜਿੱਠਿਆ ਜਾਂਦਾ ਹੈ ਤਾਂ ਬੂਟਸਟਰੈਪ ਦੇ ਲਾਭ ਹੁੰਦਾ ਹੈ g-* ਕਲਾਸਾਂ, ਜੋ ਕਿ ਕਾਲਮਾਂ ਦੇ ਵਿਚਕਾਰ ਗਟਰ ਵੰਡਦੇ ਹਨ. ਨਾਲ ਘਟਾਉਣ ਜਾਂ ਵਧਦੇ ਗਟਰ ਅਕਾਰ ਨੂੰ ਘਟਾਉਣਾ g-0 ਜਾਂ g-4 ਅਸਿੱਧੇ ਤੌਰ 'ਤੇ ਪ੍ਰਭਾਵਿਤ ਕਰ ਸਕਦੇ ਹਨ ਕਿ ਕਦੋਂ ਕਾਲਮ ਮੁੜ-ਕਰ ਸਕਦੇ ਹਨ. ਉਦਾਹਰਣ ਦੇ ਲਈ, ਇੱਕ ਛੋਟਾ ਜਿਹਾ ਗਟਰ ਚਿੱਤਰਾਂ ਨੂੰ ਤੋੜਨ ਵੇਲੇ ਚਿੱਤਰਾਂ ਨੂੰ ਵਧੇਰੇ ਅਸਰਦਾਰ ਤਰੀਕੇ ਨਾਲ ਸਟੈਕ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ. ਇਹ ਤਕਨੀਕ ਖਾਸ ਤੌਰ 'ਤੇ ਲਾਭਦਾਇਕ ਹੈ ਜਵਾਬਦੇਹ ਈ-ਕਾਮਰਸ ਉਤਪਾਦ ਗਰਿੱਡਜ਼ ਜਾਂ ਸਮੱਗਰੀ-ਭਾਰੀ ਬਲੌਗ ਜਿੱਥੇ ਚਿੱਤਰ ਬਿਲਕੁਲ ਇਕਸਾਰ ਕਰਨੇ ਚਾਹੀਦੇ ਹਨ. 🛒
ਬੂਟਸਟਰੈਪ ਕਾਲਮ ਰੈਪਿੰਗ ਬਾਰੇ ਆਮ ਪ੍ਰਸ਼ਨ
- ਕਿਉਂ ਨਹੀਂ ਕਰਦਾ w-100 ਉਮੀਦ ਅਨੁਸਾਰ ਮੇਰੇ ਬੂਟਸਟਰੈਪ ਕਾਲਮ ਨੂੰ ਤੋੜੋ?
- ਕਿਉਂਕਿ ਬੂਟਸਟਰੈਪ ਦਾ ਗਰਿੱਡ ਸਿਸਟਮ ਅਧਾਰਿਤ ਹੈ flexbox, ਕਾਲਮ ਕੁਦਰਤੀ ਤੌਰ 'ਤੇ ਉਪਲਬਧ ਜਗ੍ਹਾ ਦੇ ਅੰਦਰ ਫਿੱਟ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਨ ਜਦੋਂ ਤੱਕ ਕਿ ਸਪਸ਼ਟ ਤੌਰ ਤੇ ਸਮੇਟਣ ਲਈ ਮਜਬੂਰ ਨਹੀਂ ਕੀਤਾ ਜਾਂਦਾ.
- ਮੈਂ ਛੋਟੀਆਂ ਸਕ੍ਰੀਨਾਂ ਨੂੰ ਤੋੜਨ ਲਈ ਕਿਸੇ ਕਾਲਮ ਨੂੰ ਕਿਵੇਂ ਜ਼ਬਰਦਸਤੀ ਕਰ ਸਕਦਾ ਹਾਂ?
- ਦੀ ਵਰਤੋਂ col-12 ਦੇ ਬਜਾਏ w-100 ਅਕਸਰ ਵਧੇਰੇ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਹੁੰਦਾ ਹੈ ਕਿਉਂਕਿ ਇਹ ਡਿਸਪਲੇਅ ਸਹੂਲਤਾਂ 'ਤੇ ਨਿਰਭਰ ਕਰਨ ਦੀ ਬਜਾਏ ਸਿੱਧੇ ਕਾਲਮ ਦੀ ਚੌੜਾਈ ਨੂੰ ਪ੍ਰਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ.
- ਕਾਲਮ ਬਰੇਕ ਨੂੰ ਬਦਲਣ ਲਈ ਕਿਹੜੇ ਬਦਲਵੇਂ methods ੰਗ ਮੌਜੂਦ ਹਨ?
- ਦੀ ਵਰਤੋਂ order-* ਕਲਾਸਾਂ ਨੂੰ ਆਰਜੀ ਤੌਰ 'ਤੇ ਵਰਤਣ ਵਿਚ ਸਹਾਇਤਾ ਕਰ ਸਕਦੀ ਹੈ, ਸਕ੍ਰੀਨ ਅਕਾਰ ਦੇ ਵਿਚਕਾਰ ਬਦਲਣ ਵੇਲੇ ਬਿਹਤਰ structure ਾਂਚੇ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦੇ ਹੋ ਸਕਦੇ ਹਨ.
- ਕੀ ਕਾਲਮ ਰੈਪਿੰਗ ਨੂੰ ਪ੍ਰਭਾਵਤ ਕਰਨ ਵਾਲੇ ਗਟਰ ਅਕਾਰ ਨੂੰ ਵਿਵਸਥਿਤ ਕਰ ਸਕਦਾ ਹੈ?
- ਹਾਂ! ਬੂਟਸਟਰੈਪ g-* ਸਹੂਲਤਾਂ ਕਾਲਮਾਂ ਦੇ ਵਿਚਕਾਰ ਫਸਾਉਣ ਦੀ ਸਹਾਇਤਾ ਕਰਨ ਵਿੱਚ ਸਹਾਇਤਾ ਕਰਦੇ ਹਨ, ਅਸਿੱਧੇ ਤੌਰ ਤੇ ਪ੍ਰਭਾਵਿਤ ਕਿਵੇਂ ਕਰਦੇ ਹਨ ਕਿ ਉਹ ਕਿਵੇਂ ਛੋਟੀਆਂ ਸਕ੍ਰੀਨਾਂ ਤੇ ਸਟੈਕ ਕਰਦੇ ਹਨ.
- ਮੇਰਾ ਕਿਉਂ ਹੁੰਦਾ ਹੈ d-md-none ਕਲਾਸ ਦੀ ਉਮੀਦ ਅਨੁਸਾਰ ਕੰਮ ਨਹੀਂ ਕਰਦਾ?
- ਜੇ ਹੋਰ ਸੀਐਸਐਸ ਦੇ ਨਿਯਮ ਇਸ ਨੂੰ ਅਣਡਿੱਠ ਕਰਦੇ ਹਨ, ਜਿਵੇਂ ਕਿ ਪੇਰੈਂਟ ਕੰਟੇਨਰ ਸ਼ੈਲੀਆਂ ਜਾਂ display:flex ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ, ਤੱਤ ਉਦੇਸ਼ ਅਨੁਸਾਰ ਵਿਵਹਾਰ ਨਹੀਂ ਕਰ ਸਕਦਾ.
ਜਦੋਂ ਕੰਮ ਕਰ ਰਹੇ ਹੋ ਬੂਟਸਟਰੈਪ 5.3, ਹੈਂਡਲਿੰਗ ਕਾਲਮ ਬਰੇਕ ਕਈ ਵਾਰ ਮੁਸ਼ਕਲ ਹੋ ਸਕਦੇ ਹਨ ਫਲੈਕਸਬਾਕਸGRESD ਗਰਿੱਡ ਸਿਸਟਮ. ਬਹੁਤ ਸਾਰੇ ਡਿਵੈਲਪਰ ਉਮੀਦ ਕਰਦੇ ਹਨ ਡਬਲਯੂ -100 ਡੀ-ਬਲਾਕ ਡੀ-ਐਮਡੀ - ਕੋਈ ਨਹੀਂ ਇੱਕ ਲਾਈਨ ਬਰੇਕ ਬਣਾਉਣ ਲਈ, ਪਰ ਇਹ ਹਮੇਸ਼ਾਂ ਉਦੇਸ਼ ਵਜੋਂ ਕੰਮ ਨਹੀਂ ਕਰਦਾ. ਇਹ ਚੁਣੌਤੀ ਪੈਦਾ ਹੁੰਦੀ ਹੈ ਕਿਉਂਕਿ ਬੂਟਸਟਰੈਪ ਦਾ ਡਿਫੌਲਟ ਵਤੀਰਾ ਉਪਲਬਧ ਜਗ੍ਹਾ ਦੇ ਅੰਦਰ ਕਾਲਮ ਫਿੱਟ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦਾ ਹੈ. ਇਸ ਨੂੰ ਹੱਲ ਕਰਨ ਲਈ, ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀਆਂ ਤਕਨੀਕਾਂ ਕਰਨਲ -12, ਗਟਰ ਅਕਾਰ ਨੂੰ ਵਿਵਸਥਿਤ ਕਰਨਾ ਜਾਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਨੂੰ ਲਾਗੂ ਕਰਨਾ ਸਮੱਗਰੀ ਨੂੰ ਸਹੀ ਤਰ੍ਹਾਂ ਲਪੇਟਣ ਨੂੰ ਯਕੀਨੀ ਬਣਾ ਸਕਦਾ ਹੈ. ਭਾਵੇਂ ਇੱਕ ਚਿੱਤਰ ਗੈਲਰੀ ਜਾਂ ਉਤਪਾਦ ਗਰਿੱਡ ਡਿਜ਼ਾਇਨ ਕਰਨਾ ਅਸਲ ਵਿੱਚ ਜਵਾਬਦੇਹ ਖਾਕਾ ਬਣਾਉਣ ਲਈ ਇਹਨਾਂ ਸੂਝ-ਬੂਝ ਨੂੰ ਸਮਝਣਾ ਜ਼ਰੂਰੀ ਹੈ. 📱
ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਕਾਲਮ ਰੈਪਿੰਗ ਲਈ ਕੁੰਜੀ ਟੇਕੇਵੇਅ
ਬੂਟਸਟਰੈਪ ਦੇ ਗਰਿੱਡ ਸਿਸਟਮ ਨੂੰ ਸਮਝਣ ਦੀ ਜ਼ਰੂਰਤ ਹੈ ਫਲੈਕਸਬਾਕਸ ਕਾਲਮ ਦੇ ਵਿਵਹਾਰ ਨੂੰ ਪ੍ਰਭਾਵਤ ਕਰਦਾ ਹੈ. ਜੇ ਰਵਾਇਤੀ methods ੰਗ ਪਸੰਦ ਕਰਦੇ ਹਨ ਡਬਲਯੂ -100 ਕੰਮ ਨਾ ਕਰੋ, ਸਥਾਨਕ ਪਹੁੰਚ ਆਰਡਰ ਕਰਨਾ, ਗਟਰ ਅਕਾਰ ਨੂੰ ਵਿਵਸਥਤ ਕਰਨਾ, ਜਾਂ ਸੀਐਸਐਸ ਨਿਯਮਾਂ ਨੂੰ ਲਾਗੂ ਕਰਨਾ ਫਲੈਕਸ-ਅਧਾਰ ਬਿਹਤਰ ਨਤੀਜੇ ਪ੍ਰਦਾਨ ਕਰ ਸਕਦਾ ਹੈ. ਨਿਰਵਿਘਨ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਵੱਖੋ ਵੱਖਰੇ ਸਕ੍ਰੀਨ ਅਕਾਰਾਂ ਵਿੱਚ ਜਾਂਚ ਕਰਨਾ ਬਹੁਤ ਜ਼ਰੂਰੀ ਹੈ. 🛠️
ਜੋੜ ਕੇ CSS, ਜਾਵਾ ਸਕ੍ਰਿਪਟ, ਅਤੇ struct ਾਂਚਾਗਤ ਵਿਵਸਥਾਵਾਂ, ਡਿਵੈਲਪਰ ਆਮ ਕਾਲਮ-ਲਪੇਟ ਦੇ ਮੁੱਦਿਆਂ ਨੂੰ ਪਾਰ ਕਰ ਸਕਦੇ ਹਨ. ਕੀ ਇੱਕ ਲਈ ਈ-ਕਾਮਰਸ ਲੇਆਉਟ ਜਾਂ ਇਕ ਗਤੀਸ਼ੀਲ ਤਸਵੀਰ ਨੂੰ ਲਾਗੂ ਕਰਨ ਵਾਲੇ, ਸਹੀ ਤਕਨੀਕਾਂ ਨੂੰ ਲਾਗੂ ਕਰਨ ਨਾਲ ਸਾਰੀਆਂ ਡਿਵਾਈਸਾਂ 'ਤੇ ਸਮੱਗਰੀ ਨੂੰ ਸਹੀ ਤਰ੍ਹਾਂ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ. ਪ੍ਰਯੋਗ ਰੱਖਣਾ, ਅਤੇ ਬੂਟਸਟਰੈਪ ਤੁਹਾਡੇ ਜਵਾਬਦੇਹ ਡਿਜ਼ਾਇਨ ਟੂਲਕਿੱਟ ਵਿੱਚ ਇੱਕ ਸ਼ਕਤੀਸ਼ਾਲੀ ਸੰਦ ਬਣ ਜਾਵੇਗਾ! 🚀
ਮੁੱਖ ਹਵਾਲੇ ਅਤੇ ਸਰੋਤ
- ਕਾਲਮ ਲੇਆਉਟ ਅਤੇ ਜਵਾਬਦੇਹ ਸਹੂਲਤਾਂ ਬਾਰੇ ਬੂਟਸਟਰੈਪ ਦੇ ਅਧਿਕਾਰਤ ਦਸਤਾਵੇਜ਼: ਬੂਟਸਟਰੈਪ 5.3 ਕਾਲਮ ਬਰੇਕ .
- ਬੂਟਸਟਰੈਪ ਡਿਸਪਲੇਅ ਸਹੂਲਤਾਂ 'ਤੇ ਗਾਈਡ ਅਤੇ ਸਕ੍ਰੀਨ ਅਕਾਰ ਦੇ ਅਧਾਰ ਤੇ ਲੁਕਾਉਣ ਵਾਲੇ ਐਲੀਮੈਂਟਸ ਤੇ ਗਾਈਡ: ਬੂਟਸਟਰੈਪ 5.3 ਡਿਸਪਲੇਅ ਸਹੂਲਤਾਂ .
- ਫਲੈਕਸਬੌਕਸ ਅਸੂਲ ਅਤੇ ਬੂਟਸਟਰੈਪ ਗਰਿੱਡ ਵਿਵਹਾਰ 'ਤੇ ਉਨ੍ਹਾਂ ਦੇ ਪ੍ਰਭਾਵ: ਐਮ ਡੀ ਐਨ ਵੈਬ ਡੌਕਸ - ਫਲੈਕਸਬਾਕਸ .
- ਜਵਾਬਦੇਹ ਚਿੱਤਰ ਗਰਿੱਡ ਅਤੇ ਕਾਲਮ ਪ੍ਰਬੰਧਨ ਲਈ ਸਭ ਤੋਂ ਵਧੀਆ ਅਭਿਆਸ: ਸਮਾਧਿੰਗ ਮੈਗਜ਼ੀਨ - ਜਵਾਬਦੇਹ ਖਾਕਾ .