প্রতিক্রিয়াশীল বুটস্ট্র্যাপ নববারে কেন্দ্রের সামগ্রী

221

বুটস্ট্র্যাপ নববারে আমার সামগ্রীটি কেন্দ্রে রাখতে আমার সমস্যা হচ্ছে having আমি বুটস্ট্র্যাপ 3 ব্যবহার করছি I've আমি অনেকগুলি পোস্ট পড়েছি, তবে সিএসএস বা ব্যবহৃত পদ্ধতিগুলি আমার কোড দিয়ে কাজ করবে না! আমি সত্যিই হতাশ, তাই এটি আমার শেষ বিকল্পের মতো। কোন সাহায্য প্রশংসা হবে!

<!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; }

— জেননিউরেন

3

আমি আসল বুটস্ট্র্যাপ সিএসএসের সাথে না খেলার পরামর্শ দেব। পরিবর্তে, আপনার নিজস্ব শৈলী তৈরি করুন।

— ফয়জান মুবাশ্বের

আমার ক্ষেত্রে, আমাকে "ফ্লেক্স" সরিয়ে "ইনলাইন-ব্লক" দিয়ে প্রতিস্থাপন করতে হয়েছিল তখন এটি কাজ শুরু করে started

— মেয়ার

একটি নিখুঁত সমাধান।

— রেনাতো লাজারো

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)। তবুও, আপনি যদি এটি করতে পারেন তবে এটি আপনার নাবার বারের লিঙ্কগুলি এবং দেহকে কেন্দ্রিক করে তোলার একটি সহজ উপায়।

আপনি এই পুরো পৃষ্ঠাতে ফলাফল দেখতে পারেন জেএসফিডাল: http://jsfiddle.net/bdd9U/231/ এম্বেডড / রিসাল্ট/

সূত্র: 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

বুথস্ট্র্যাপ 4-এ নভবার সামগ্রীগুলি কেন্দ্রীভূত করা সহজ, এবং আপনি এখানে ব্যাখ্যা করা অনেকগুলি কেন্দ্রিক দৃশ্য দেখতে পারেন: https://stackoverflow.com/a/20362024/171456

বুটস্ট্র্যাপ 3

আরেকটি দৃশ্যকল্প করেছে যা এখন পর্যন্ত উত্তর দেওয়া হয়নি বলে মনে হচ্ছে না কেঁদ্রীকরণ হয় উভয় ব্র্যান্ড এবং NavBar লিঙ্ক । এখানে একটি সমাধান ..

.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

এছাড়াও দেখুন: বাম, কেন্দ্র বা ডান সারিবদ্ধ আইটেমগুলির সাথে বুটস্ট্র্যাপ নাভবার

— জিম্বাবুয়ে
সূত্র

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">

CSS:

@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

এই সমস্ত উত্তরগুলির মতো মনে হচ্ছে বুটস্ট্র্যাপের শীর্ষে কাস্টম সিএসএস জড়িত। আমি যে উত্তরটি দিচ্ছি তা কেবল বুটস্ট্র্যাপই কাজে লাগায় তাই আমি আশা করি এটি কাস্টমাইজেশন সীমাবদ্ধ করতে চায় তাদের জন্য এটি ব্যবহারে আসে।

এটি বুটস্ট্র্যাপ ভি 3.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%);
}

— Govan
সূত্র

1

নিম্নলিখিত এইচটিএমএল ব্যবহার করুন

<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>

এবং CSS

.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

বুটস্ক্র্যাপের ভি 4 কেন্দ্র হিসাবে যুক্ত হয়েছে (ন্যায্য বিষয়বস্তু-কেন্দ্র) এবং ডান প্রান্তিককরণ (ন্যায্য-বিষয়বস্তু-শেষ): https://v4-alpha.getbootstrap.com/compferences/navs/#horizontal-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>

— কোডার
সূত্র

আপনি কি নিশ্চিত যে এটি কাজ করে? আমি চেষ্টা কিন্তু যেহেতু আমার লি এর পূর্ণ এই কোনো পার্থক্য করে তোলে প্রস্থ

— Göta

হাই নুনো আমরা এটি আমাদের অ্যাপ্লিকেশনটিতে ব্যবহার করছি তাই হ্যাঁ এটি অবশ্যই কাজ করে, এটি আমাদের অ্যাপের শীর্ষে একটি অনুভূমিক মেনু, এখনও ব্যবহৃত।

— কোডার