उत्तरदायी बूटस्ट्रैप नावबार में केंद्र सामग्री

221

मुझे बूटस्ट्रैप नावबार में अपनी सामग्री को केंद्रित करने में परेशानी हो रही है। मैं बूटस्ट्रैप 3 का उपयोग कर रहा हूं। मैंने कई पोस्ट पढ़ी हैं, लेकिन उपयोग किए गए सीएसएस या तरीके मेरे कोड के साथ काम नहीं करेंगे! मैं वास्तव में निराश हूं, इसलिए यह मेरे अंतिम विकल्प की तरह है। किसी भी सहायता की सराहना की जाएगी!

<!DOCTYPE html>
<html>
  <head>
    <title>Navigation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/style.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class="container">
      <nav class="navbar navbar-default" role="navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
          <ul class="nav navbar-nav">
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </nav>
      <h1>Home</h1>

   </div>
     <!--JAVASCRIPT-->
   <script src="js/jquery-1.10.2.min.js"></script>
   <script src="js/bootstrap.min.js"></script>
 </body>
</html>

https://jsfiddle.net/amk07fb3/

css twitter-bootstrap navbar

— निक एल.के.
स्रोत

457

मुझे लगता है कि तुम इसे खोज रहे हो। आपको float: leftआंतरिक नौसेना से इसे केंद्र में निकालने और इसे इनलाइन-ब्लॉक बनाने की आवश्यकता है।

.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}

.navbar .navbar-collapse {
  text-align: center;
}

http://jsfiddle.net/bdd9U/2/

संपादित करें: यदि आप केवल यही प्रभाव चाहते हैं कि जब नौसेना ध्वस्त न हो जाए तो उसे उपयुक्त मीडिया क्वेरी में घेर लें।

@media (min-width: 768px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;
    }

    .navbar .navbar-collapse {
        text-align: center;
    }
}

http://jsfiddle.net/bdd9U/3/

— hajpoj
स्रोत

यदि आपको लिंक के नीचे अतिरिक्त स्थान की समस्या है (यदि आप उदाहरण के लिए सक्रिय लिंक के लिए एक अलग पृष्ठभूमि का उपयोग कर रहे हैं) तो आप उपयोग कर सकते हैं:.navbar .navbar-collapse { line-height: 0px; }

— jenniwren

3

मैं मूल bootstrap.css के साथ नहीं खेलने की सलाह दूंगा। इसके बजाय, अपनी खुद की शैली बनाएं।

— फैजान मुबाशेर

मेरे मामले में, मुझे "फ्लेक्स" को हटाने और "इनलाइन-ब्लॉक" के साथ प्रतिस्थापित करना था, फिर यह काम करना शुरू कर दिया।

— TheMayer

एक सही समाधान है।

— रेनाटो लजारो

47

मूल पोस्ट पूछ रही थी कि ढह गए नौबहार को कैसे केंद्र में रखा जाए। तत्वों को सामान्य नावबार पर केन्द्रित करने के लिए, इसे आज़माएँ:

.navbar-nav {
    float:none;
    margin:0 auto;
    display: block;
    text-align: center;
}

.navbar-nav > li {
    display: inline-block;
    float:none;
}

— राडू रस्कोल
स्रोत

23

लेआउट के लिए ऐसा करने का एक और तरीका है जिसमें कंटेनर के अंदर नेवबार नहीं डालना है, और जिसे किसी सीएसएस या बूटस्ट्रैप की आवश्यकता नहीं है।

बस containerनेवबार के आसपास बूटस्ट्रैप क्लास के साथ एक डिव लगाएं। यह नेवबार के अंदर लिंक को केंद्र में रखेगा:

<nav class="navbar navbar-default">
  <!-- here's where you put the container tag -->
  <div class="container">

    <div class="navbar-header">
    <!-- header and collapsed icon here -->
    </div>

    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
      <!-- links here -->
      </ul>
    </div>
  </div> <!-- close the container tag -->
</nav> <!-- close the nav tag -->

यदि आप तत्कालीन एलायंस कंटेंट को सेंटर नेबार में चाहते हैं, तो आप उस बॉडी कंटेंट को बूटस्ट्रैप containerटैग में भी डाल सकते हैं ।

<div class="container">
  <! -- body content here -->
</div>

हर कोई इस प्रकार के लेआउट का उपयोग नहीं कर सकता है (कुछ लोगों को अंदर ही अंदर नावबार को घोंसला बनाने की जरूरत है container )। फिर भी, यदि आप यह कर सकते हैं, तो यह आपके नौसिखिया लिंक और शरीर को केंद्रित करने का एक आसान तरीका है।

आप इस पूर्ण पृष्ठ JSField में परिणाम देख सकते हैं: http://jsfiddle.net/bdd9U/231/embedded/result/

स्रोत: http://jsfiddle.net/bdd9U/229/

— एरिक एस बुलिंगटन
स्रोत

13

हम्म, यह समाधान अब काम नहीं करता है। आपका उदाहरण अब संरेखित किया गया है।

— बेज़र्टे औन ओल्सन

मेरे लिए काम नहीं किया, लेकिन आपके समाधान की सादगी की सराहना करें!

— बेन कैसालिनो

12

इस कोड ने मेरे लिए काम किया

.navbar .navbar-nav {
    display: inline-block;
    float: none;
}
.navbar .navbar-collapse {
    text-align: center;
}

— शुहाद ज़मान
स्रोत

8

बूटस्ट्रैप 4 के लिए:

महज प्रयोग करें

<ul class="navbar-nav mx-auto">

एमएक्स-ऑटो काम करेगा

— हेज़ी ज़िव
स्रोत

8

2020 अपडेट करें ...

बूटस्ट्रैप ४

नवबंर कंटेंट को आसान बनाना बूटस्ट्रैप 4 है, और आप यहाँ बताए गए कई सेंटरिंग परिदृश्य देख सकते हैं: https://stackoverflow.com/a/20362024/171456

बूटस्ट्रैप ३

अन्य परिदृश्य है कि अभी तक उत्तर दिया है प्रतीत नहीं होता है केंद्रित है दोनों ब्रांड और नेवबार लिंक । यहाँ एक समाधान है ..

.navbar .navbar-header,
.navbar-collapse {
    float:none;
    display:inline-block;
    vertical-align: top;
}

@media (max-width: 768px) {
    .navbar-collapse  {
        display: block;
    }
}

http://codeply.com/go/1lrdvNH9GI

यह भी देखें: बूटस्ट्रैप नवबार बाईं, केंद्र या दाईं ओर संरेखित आइटम के साथ

— Zim
स्रोत

4

बूटस्ट्रैप आधिकारिक साइट से (और, लगभग, जैसे एरिक एस। बुलिंगटन ने कहा।

https://getbootstrap.com/components/#navbar-default

उदाहरण नावबर जैसा दिखता है:

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
        ...etc

नौसेना को केन्द्रित करने के लिए, कि मैंने क्या किया है:

<div class="container-fluid" id="nav_center">

सीएसएस:

@media (min-width:768px) { /* don't break navbar on small screen */
    #nav_center {
        width: 700px /* need to found your width according to your entry*/
    }
}

क्लास = "कंटेनर" और नावबार-राइट या लेफ्ट के साथ काम करें, और निश्चित रूप से आप आईडी को क्लास से बदल सकते हैं। : डी

— NoZero
स्रोत

3

ऐसा लगता है कि इन सभी उत्तरों में बूटस्ट्रैप के ऊपर कस्टम सीएसएस शामिल है। मैं जो उत्तर दे रहा हूं वह केवल बूटस्ट्रैप का उपयोग करता है इसलिए मुझे आशा है कि यह उन लोगों के लिए उपयोग करने के लिए आता है जो अनुकूलन को सीमित करना चाहते हैं।

यह बूटस्ट्रैप V3.3.7 के साथ परीक्षण किया गया था

<footer class="navbar-default navbar-fixed-bottom">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-offset-5 col-xs-2 text-center">
                <p>I am centered text<p>
            </div>
            <div class="col-xs-5"></div>
        </div>
    </div>
</footer>

— टॉमी मई
स्रोत

2

यह काम करना चाहिए

 .navbar-nav {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
}

— गोवन
स्रोत

1

Html का प्रयोग करें

<link rel="stylesheet" href="app/components/directives/navBar/navBar.scss"/>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <!-- Collect the nav links, forms, and other content for toggling -->
            <ul class="nav navbar-nav">
                <li><h5><a href="#/">Home</a></h5></li>
                <li>|</li>
                <li><h5><a href="#products">About</a></h5></li>
                <li>|</li>
                <li><h5><a href="#">Contacts</a></h5></li>
                <li>|</li>
                <li><h5><a href="#cart">Cart</a></h5></li>
            </ul>
    </div><!-- /.container-fluid -->
</nav>

और सी.एस.एस.

.navbar-nav {
  width: 100%;
  text-align: center;
}
.navbar-nav > li {
  float: none;
  display: inline-block;
}
.navbar-default {
  background-color: white;
  border-color: white;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus{
  background-color:white;
}

अपनी आवश्यकताओं के अनुसार संशोधित करें

— अलेक्जेंडर गोरेलिक
स्रोत

1

बूटस्ट्रैप का V4 केंद्र (औचित्य-सामग्री-केंद्र) और सही संरेखण (औचित्य-सामग्री-समाप्ति) को प्रति के रूप में जोड़ रहा है: https://v4-alpha.getbootstrap.com/compenders/navs/#horouble/alignment

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

— कोडर
स्रोत

क्या आपको यकीन है कि यह काम करता है? मैंने कोशिश की लेकिन जब से मेरी ली के भरे हुए हैं इस कोई फर्क नहीं पड़ता चौड़ाई

— gota

हाय नूनो हम इसे अपने ऐप में उपयोग कर रहे हैं, हां यह निश्चित रूप से काम करता है, हमारे ऐप के शीर्ष पर एक क्षैतिज मेनू है, अभी भी उपयोग में है।

— कोडर