বুটস্ট্র্যাপ 3 অনুভূমিক বিভাজক (একটি ড্রপডাউন নয়)

Question

আমি জানি Bootstrap 3যে একটি অনুভূমিক বিভাজক রয়েছে আপনি ড্রপডাউন মেনুগুলির ভিতরে এই জাতীয় লিঙ্কগুলি আলাদা করতে রাখতে পারেন:

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
  <li role="presentation" class="dropdown-header">Dropdown header</li>
   ...
  <li role="presentation" class="divider"></li>
</ul>

আমার প্রশ্নটি হ'ল: কোনও ড্রপডাউন না করে এটি করার কোনও উপায় আছে, যেমন এটি কোনও ধরণের তালিকা বা অনুরূপ মেনুতে রাখার মতো?

Answer 1

হ্যাঁ, আপনি <hr>যেখানে চান সেখানে কেবল আপনার কোডটি রাখতে পারেন, আমি ইতিমধ্যে এটি আমার অ্যাডমিন প্যানেলের সাইড বারে ব্যবহার করেছি।

Comments

<hr />আরও ভাল।

— এরউইন মায়ার

@ এরউইনমায়ার <hr />এক্সএইচটিএমএলের জন্য। এইচটিএমএল 4 বা 5 এ এটি ঠিক<hr>

— ডেভ

এটি একটি পুরানো জবাব, তবে যারা এখানে আমার মতো হোঁচট খেয়েছে তাদের ক্ষেত্রে <hr> ওপেনের মতো উপস্থাপনের উদ্দেশ্যে ব্যবহার করা উচিত নয়। এটি অনুচ্ছেদে বিষয়বস্তু পরিবর্তনের জন্য। নিয়ন্ত্রণ ফর্ম্যাট করতে যেমন এক হিসাবে পি ট্যাগ ব্যবহার করা উচিত নয়।

— কেএমসি

Answer 2

বর্তমানে এটি কেবল এর জন্য কাজ করে .dropdown-menu:

.dropdown-menu .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}

আপনি যদি এটি অন্য ব্যবহারের জন্য চান তবে নিজের সিএসএসে, বুটস্ট্র্যাপ সিএসএস অনুসরণ করে অন্য একটি তৈরি করুন:

.divider {
  height: 1px;
  width:100%;
  display:block; /* for use on default inline elements like span */
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}

Answer 3

যেহেতু আমি ডিফল্ট বুটস্ট্র্যাপের <hr/>আকারটি কৃপণভাবে খুঁজে পেয়েছি , উপাদানটিকে দৃশ্যতভাবে ভারসাম্যপূর্ণ করার জন্য এখানে কিছু সাধারণ এইচটিএমএল এবং সিএসএস রয়েছে:

এইচটিএমএল:

<hr class="half-rule"/>

সিএসএস:

.half-rule { 
    margin-left: 0;
    text-align: left;
    width: 50%;
 }