আমি কীভাবে পৃষ্ঠায় টুইটার বুটস্ট্র্যাপ ট্যাবগুলি কেন্দ্র করব?

Question 1

টগল্লেবল ট্যাবগুলি তৈরি করতে আমি টুইটার বুটস্ট্র্যাপ ব্যবহার করছি। এখানে আমি ব্যবহার করছি সিএসএস:

<div class="container">
  <ul class="nav nav-tabs">
    <li><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#profile" data-toggle="tab">Profile</a></li>
    <li><a href="#messages" data-toggle="tab">Messages</a></li>
    <li><a href="#settings" data-toggle="tab">Settings</a></li>
  </ul>
</div>

এই এইচটিএমএল সঠিকভাবে ট্যাবগুলি প্রদর্শন করে, তবে বাম দিকে টানছে (যা হবার কথা। পৃষ্ঠাগুলিতে কেন্দ্রে ট্যাবগুলি আনতে আমি সিএসএসের সাথে টিঙ্কারিংয়ের চেষ্টা করেছি, তবে এখনও ভাগ্য হয়নি। আমি ভেবেছিলাম যে আরও সিএসএস অভিজ্ঞতা সম্পন্ন কেউ এই কীভাবে করবেন তা জানবেন।

একটি নোট হিসাবে, ন্যাভ পিলগুলি কেন্দ্র করে তোলার বিষয়ে আরও একটি প্রশ্ন রয়েছে, যা আমি চেষ্টা করেছি, তবে এটি কেবল সরল এনএভি ট্যাব নিয়ে কাজ করে নি।

ধন্যবাদ

Question 2

nav-tabsতালিকার আইটেমগুলি বুটস্ট্র্যাপ দ্বারা স্বয়ংক্রিয়ভাবে বামে ভাসমান হয় যাতে আপনাকে সেটিকে পুনরায় সেট করতে হবে এবং পরিবর্তে সেগুলি প্রদর্শন করতে হবে inline-blockএবং মেনু আইটেমগুলির কেন্দ্রস্থলে আমাদের ধারকটির বৈশিষ্ট্য যুক্ত text-align:centerকরতে হবে, যেমন:

সিএসএস

.nav-tabs > li, .nav-pills > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
     zoom:1; /* hasLayout ie7 trigger */
}

.nav-tabs, .nav-pills {
    text-align:center;
}

ডেমো: http://jsfiddle.net/U8HGz/2/show/ এখানে সম্পাদনা করুন: http://jsfiddle.net/U8HGz/2/

সম্পাদনা করুন: প্যাচ করা সংস্করণ যা ব্যবহারকারী @ মাই হেড হার্টস নীচে দেওয়া মন্তব্যে আইই 7 + তে কাজ করে provided

ডেমো: http://jsfiddle.net/U8HGz/3/show/ এখানে সম্পাদনা করুন: http://jsfiddle.net/U8HGz/3/

Question 3

গৃহীত উত্তর নিখুঁত। এটি আরও কাস্টমাইজ করা যায় যাতে আপনি এটি স্ট্যান্ডার্ড বাম সারিবদ্ধ ট্যাবগুলির পাশাপাশি পাশাপাশি ব্যবহার করতে পারেন।

.nav-tabs.centered > li, .nav-pills.centered > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
     zoom:1; /* hasLayout ie7 trigger */
}

.nav-tabs.centered, .nav-pills.centered {
    text-align:center;
}

এটি ব্যবহার করতে, আপনার ট্যাব উপাদানগুলিতে "কেন্দ্রিক" শ্রেণি যুক্ত করুন

<ul class="nav nav-tabs centered" >
..
</ul>

Question 4

ক্লাস যুক্ত করা nav-justifiedআমার পক্ষে কাজ করে। এই কেন্দ্রটি কেবল ট্যাবগুলিকে সারিবদ্ধ করে না তবে এটি শীর্ষে তাদের সুন্দরভাবে ছড়িয়ে দেয়।

<ul class="nav nav-tabs nav-justified">
    <li><a href="#Page1">Page1</a></li>
    <li><a href="#Page2">Page2</a></li>
    <li><a href="#Page3">Page3</a></li>
    <li><a href="#Page4">Page4</a></li>
  </ul>

যদিও গৃহীত উত্তরটি ভাল কাজ করে তবে বুটস্ট্র্যাপের জন্য আমি উপরেরটি আরও প্রাকৃতিক পেয়েছি।

Question 5

সহজভাবে যোগ করা

margin-left:50%;

আমি যখন আমার ট্যাবগুলি সেট আপ করি তখন আমার পক্ষে কাজ করে।

যেমন যেমন

<ul class="nav nav-tabs" style="margin-left:50%; margin-right:50%;">

Question 6

আপনার ন্যাভ-ট্যাবগুলি কেন্দ্র করতে আপনি কেবল বুটস্ট্র্যাপ গ্রিড ব্যবহার করতে পারেন । যেহেতু বুটস্ট্র্যাপ গ্রিডটি 12 টি সমান কলামগুলিতে বিভক্ত, আপনি সহজেই আপনার ন্যাভিগেশনের জন্য 4 টি কলাম অফসেট সহ 4 টি কলাম ব্যবহার করতে পারেন:

<div class="col-sm-4 col-sm-offset-4">।

সুতরাং আপনার বাম এবং ডানদিকে 4 টি কলাম বিনামূল্যে পৃষ্ঠার মাঝখানে (প্রতিক্রিয়াশীল সমাধান) আপনার নেভিগেশন পাচ্ছেন।

আমি গ্রিডটি প্রতিক্রিয়াশীল ওয়েব পৃষ্ঠাগুলি তৈরির জন্য সত্যই দরকারী বলে মনে করেছি। শুভকামনা!

<div class="row-fluid">
  <div class="col-sm-12">
    <div class="col-sm-4 col-sm-offset-4">
      <ul class="nav nav-tabs">
        <li><a href="#home" data-toggle="tab">Home</a></li>
        <li><a href="#profile" data-toggle="tab">Profile</a></li>
        <li><a href="#messages" data-toggle="tab">Messages</a></li>
        <li><a href="#settings" data-toggle="tab">Settings</a></li>
      </ul>
    </div>
  </div>
</div>

Question 7

আপনি যদি bs4 ব্যবহার করেন তবে আপনি justify-content-centerপৃষ্ঠাতে এটি কেন্দ্র করে আপনার ন্যাভ-ট্যাবগুলিতে শ্রেণি যুক্ত করতে পারেন । আপনি যদি নিজের ট্যাবগুলিকে ন্যায়সঙ্গত করতে চান (সম্পূর্ণ সহ) nav-justifiedএটিতে শ্রেণি যুক্ত করুন , এই ক্ষেত্রে যদি আপনার এনএভিতে 3 টি আইটেম থাকে তবে তাদের প্রতিটির 33% রয়েছে। যদি 5 টি আইটেম থাকে তবে প্রত্যেকের 20% থাকে।

অন্য উপায়টি হ'ল যোগ করা text-centerযদি আপনি বিএস 3 ব্যবহার করেন ।

Question 8

‌ বুটস্ট্র্যাপের নিজেই এই নামে একটি শ্রেণি রয়েছে nav-justified । কেবল এটির মতো যুক্ত করুন:

<ul class="nav nav-tabs nav-justified">

আপনি যদি <li>পাশাপাশি কেন্দ্রের সামগ্রীগুলি সারিবদ্ধ করতে চান তবে এটি তৈরি করুন disply: inline-block।

Question 9

এটা চেষ্টা কর:

<ul class="nav nav-tabs justify-content-center">