चहचहाना बूटस्ट्रैप पाठ केंद्र जब XS मोड

में मैं एचटीएमएल है के रूप में: -चहचहाना बूटस्ट्रैप पाठ केंद्र जब XS मोड

<footer> 
<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-6 text-left"> 
      <p> 
       &copy; 2015 example.com. All rights reserved. 
      </p> 
     </div> 
     <div class="col-xs-12 col-sm-6 text-right"> 
      <p> 
       <a href="#"><i class="fa fa-facebook"></i></a> 
       <a href="#"><i class="fa fa-twitter"></i></a> 
       <a href="#"><i class="fa fa-google-plus"></i></a> 
      </p> 
     </div> 
    </div> 
</div> 
</footer>

कोड आप देख सकते हैं कि स्तंभ का पाठ छोड़ दिया जाता है और सही क्रमशः गठबंधन से। हालांकि एक्सएस मोड में मैं उन्हें केंद्र गठबंधन करना पसंद करता हूं। ट्विटर बूटस्ट्रैप का उपयोग करके मैं यह कैसे कर सकता हूं?

स्रोत

2015-04-10 Dipendra Gurung

की डुप्लीकेट http://stackoverflow.com/questions/18602121/change-text-align-responsively-with-bootstrap-3 – Lee

https://github.com/twbs/bootstrap/issues/21698 –

इसके लिए बूटस्ट्रैप में कुछ भी नहीं बनाया गया है, लेकिन कुछ सरल सीएसएस इसे ठीक कर सकता है। ऐसा कुछ काम करना चाहिए। परीक्षण नहीं किया है, हालांकि

@media (max-width: 768px) { 
     .col-xs-12.text-right, .col-xs-12.text-left { 
       text-align: center; 
     } 
    }

स्रोत

2015-04-10 13:33:57 loddn

मुझे जोड़ना था! बूट करने के लिए इस फिक्स के लिए महत्वपूर्ण है क्योंकि बूटस्ट्रैप में टेक्स्ट-बाएं था! महत्वपूर्ण। –

@media (max-width: 767px) { 
    footer .text-right, 
    footer .text-left { 
     text-align: center; 
    } 
}

मैं @ loddn के जवाब अद्यतन, जिससे दो परिवर्तन

बूटस्ट्रैप में xs स्क्रीन के max-width है 767px
(768px sm स्क्रीन की शुरुआत है) (यह एक वरीयता का मामला है) मैंने footer का उपयोग col-* के बजाय किया ताकि अगर कॉलम चौड़ाई बदल जाए, तो सीएसएस को अपडेट करने की आवश्यकता नहीं है।

स्रोत

2015-04-10 13:44:53

उत्तरदायी पाठ संरेखण बूटस्ट्रैप V4 में जोड़ दिया गया है:

https://v4-alpha.getbootstrap.com/utilities/typography/#text-alignment

, बाएं, दाएं, और केन्द्र संरेखण के लिए, संवेदनशील वर्गों है कि ग्रिड के रूप में ही व्यूपोर्ट चौड़ाई breakpoints का उपयोग उपलब्ध हैं प्रणाली।

<p class="text-xs-center">Center aligned text on all viewport sizes.</p>

स्रोत

2016-08-07 08:07:45 Jarrod

लिंक 404 देता है। जब मैं तय करता हूं तो मैं ऊपर हट जाऊंगा: डी –

_Aha._ https://github.com/twbs/bootstrap/issues/21698 –

https: //v4-alpha.getbootstrap।कॉम/यूटिलिटीज/टाइपोग्राफी/# टेक्स्ट-संरेखण –

Css हिस्सा है:

सीएसएस:

@media (max-width: 767px) { 

    // Align text to center. 
    .text-xs-center { 
    text-align: center; 
    } 
}

और एचटीएमएल हिस्सा होगा (केवल 767px चौड़ाई नीचे इस पाठ केंद्र काम)

एचटीएमएल :

<div class="col-xs-12 col-sm-6 text-right text-xs-center"> 
     <p> 
      <a href="#"><i class="fa fa-facebook"></i></a> 
      <a href="#"><i class="fa fa-twitter"></i></a> 
      <a href="#"><i class="fa fa-google-plus"></i></a> 
     </p> 
</div>

स्रोत

2016-10-03 11:58:09

यह सबसे सुंदर जवाब है क्योंकि यह मौजूदा वर्गों को हैक नहीं करता है लेकिन एक नया, सार्थक एक जोड़ता है। –

यह एक बुरा जवाब है। बूटस्ट्रैप मोबाइल पहले सिद्धांत का उपयोग करता है। अधिकतम चौड़ाई वाली एक मीडिया क्वेरी इस सरल सिद्धांत का पालन नहीं करती है। यह पाठ-एसएम-दाएं के संयोजन के साथ टेक्स्ट-सेंटर जैसा होना चाहिए। हमेशा पाठ केंद्र, और एसएम उपकरणों से एक सही स्थिति –

यह एक बूटस्ट्रैप 3 के रूप में चिह्नित किया गया था, लेकिन शायद यह उपयोगी होगा: बूटस्ट्रैप 4.0.0 (गैर बीटा) में: col वर्ग के अंदर, का उपयोग

<div class="col text-center text-md-left">

"पाठ-केंद्र "सभी विंडो आकारों के लिए टेक्स्ट को केंद्रित करता है, फिर इसे" टेक्स्ट-एमडी-बाएं "या" टेक्स्ट-एमडी-दाएं "जोड़कर इसे ऊपर बदलने के लिए। आप इसे "टेक्स्ट-एसएम-बाएं", "टेक्स्ट-एलजी-बाएं" या जो कुछ भी बना सकते हैं। लेकिन इसे केंद्र में सेट करने से पहले इसे पहले सेट अप किया जाता है।

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> 
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> 
<body> 
<footer> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-6 text-center text-md-left"> 
     <p> 
      &copy; 2015 example.com. All rights reserved. 
     </p> 
     </div> 
     <div class="col-xs-12 col-sm-6 text-center text-md-right"> 
     <p> 
      <a href="#"><i class="fa fa-facebook"></i></a> 
      <a href="#"><i class="fa fa-twitter"></i></a> 
      <a href="#"><i class="fa fa-google-plus"></i></a> 
     </p> 
     </div> 
    </div> 

     </div> 

</footer> 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> 
</body>

स्रोत

2018-01-26 06:03:36 grahamlander

चहचहाना बूटस्ट्रैप पाठ केंद्र जब XS मोड

उत्तर

संबंधित मुद्दे