साथ flexbox चिपचिपा पाद लेख का उपयोग करते हुए मैं इस चिपचिपा पाद लेख का उपयोग करने के लिए कोशिश कर रहा हूँ:बूटस्ट्रैप
http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
body{
display: flex;
min-height: 100vh;
flex-direction: column;
}
.content{
flex: 1;
}
लेकिन यह < 768px चौड़ाई पर प्रतिपादन को खराब करता।
कोई भी सरल सीएसएस इसे सभी संकल्पों के लिए काम करने के लिए ठीक करता है?
आप flexbox आइटम 100% के width देने के लिए की जरूरत है।
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.content {
flex: 1;
}
@media only screen and (max-width: 768px) {
.content {
width: 100%;
}
}
बूटस्ट्रैप 4 अब डिफ़ॉल्ट रूप से तो यह आसान है एक चिपचिपा (तय नहीं) पाद लेख w/पाने के लिए flexbox उपयोग करता है:
इस मामले में, कि है कि .content तत्व होगा o flexbox के लिए अतिरिक्त सीएसएस। तुम सिर्फ शरीर min-height है सुनिश्चित करने के लिए जरूरत है ...
body {
min-height: 100vh;
}
फिर flexbox उपयोगिता वर्गों का उपयोग करें ...
<body class="d-flex flex-column">
<nav></nav>
<main class="flex-grow"></main>
</footer></footer>
</body>
कूल, मुझे लगता है कि बेहतर में इस लागू करने के लिए किया जाएगा अधिकतम चौड़ाई: 768 पीएक्स। http://jsfiddle.net/2xvv5mod/1/ – tachyonflux
@karaokyo ओह, अच्छा बिंदु। मुझे एहसास नहीं हुआ कि आप बूटस्ट्रैप का उपयोग कर रहे थे भले ही आपने कहा था कि आप थे। –
मैं वास्तव में 'अधिकतम-चौड़ाई के साथ जा रहा हूं: 100% ' – tachyonflux