টুইটারের বুটস্ট্র্যাপ ব্যবহার করে কীভাবে একটি তালিকা ইনলাইন প্রদর্শন করা যায়

Question

আমি বুটস্ট্র্যাপ ব্যবহার করে একটি তালিকা ইনলাইন প্রদর্শন করতে চাই। এটি অর্জনের জন্য বুটস্ট্র্যাপ থেকে আমি কোনও শ্রেণি যুক্ত করতে পারি?

Answer 1

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

<ul class="inline">
  <li>...</li>
</ul>

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

<ul class="list-inline">
  <li>...</li>
</ul>

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

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

উত্স: http://v4-alpha.getbootstrap.com/content/typography/#inline

আপডেট হওয়া লিঙ্ক https://getbootstrap.com/docs/4.4/content/typography/#inline

Comments

সমস্ত উপলব্ধ সংস্করণে সমাধান উপস্থাপনের কারণে সেরা উত্তর! ধন্যবাদ বন্ধু!

— মিসলাভিসিম্পারসাক

কেন এটি সময়ের সাথে আরও ভার্বোস পায়? বুটস্ট্র্যাপ বুঝতে পারে না যে তারা সরলতার বিপরীতে চলছে?

— পাভেল কোমারভ

Answer 2

২.৩.২ এবং ৩ এর বুটস্ট্র্যাপ ডকুমেন্টেশন অনুসারে, ক্লাসটি এভাবে সংজ্ঞায়িত করা উচিত:

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

<ul class="inline">
  <li>...</li>
</ul>

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

<ul class="list-inline">
  <li>...</li>
</ul>

Answer 3

যদিও দ্য বারেন্টের উত্তরটি সাধারণভাবে সত্য, তবে এটি সরকারী বুটস্ট্র্যাপ উপায়ে কীভাবে করা যায় সে প্রশ্নের উত্তর দেয় না। বুটস্ট্র্যাপের জন্য মার্কআপ সহজ:

<ul class="inline">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

উৎস

http://jsfiddle.net/MgcDU/4602/

Comments

@ কনিবিয়ার কোনও কারণে এটি কাজ করছে না। দ্য ব্রেন্ট সলিউশন যথেষ্ট ভাল কাজ করেছে :)

— সুশান্ত গুপ্ত

সম্ভবত আপনি বুটস্ট্র্যাপের একটি প্রাচীন সংস্করণ ব্যবহার করছেন। বুটস্ট্র্যাপ ডক্স স্পষ্টভাবে দেখায় এটি হ'ল মার্কআপ।

— কনেকেয়ার

কনিবিয়ারস সমাধান হ'ল বুটস্ট্র্যাপ নির্দিষ্ট সংস্করণ এবং জিজ্ঞাসিত প্রশ্নের উত্তর দেয়। তবে, এটির ওয়েব এবং সমস্ত কিছুই আমাদের পছন্দ মতো কালো এবং সাদা নয়, তাই যে কোনও সমাধান আপনার সময় সাশ্রয় করে তা আমি ব্যবহার করব ts যদি কেউ কাজ না করে, অন্যটিকে চেষ্টা করে এগিয়ে যান।

— দ্যবরেন্ট

@ কনিবিয়ার সলিউশনটি কেবল বুটস্ট্র্যাপ 2 সলিউশন, সে কারণেই কাজ করছে না, এর চেয়ে বেশি কিছুই হয় না, কম কিছুই হয় না!

— cl0udw4lk3r

Answer 4

রেমন্ড এর উত্তর সম্পূর্ণ করতে

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

<ul class="inline">
  <li>...</li>
</ul>

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

<ul class="list-inline">
  <li>...</li>
</ul>

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

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

উত্স: http://v4-alpha.getbootstrap.com/content/typography/#inline

Comments

দেখে মনে হচ্ছে এটি দীর্ঘ এবং দীর্ঘ হয়।

— অ্যান্টনি সাং

বুটস্ট্র্যাপ 7 <ul শ্রেণি = "আনর্ডার্ড-তালিকা-ইনলাইন-অনুভূমিক-ফ্ল্যাট-অনলাইন">

— অ্যান্টনি সাং

Answer 5

আমি বুটস্ট্র্যাপ সিএসএস ফাইলের মধ্যে সুনির্দিষ্ট কিছু খুঁজে পাইনি। সুতরাং, আমি একটি কাস্টম সিএসএস ফাইলে সিএসএস যুক্ত করেছি।

.inline li {
    display: inline;
}

Answer 6

আমি অবাক, তালিকা-ইনলাইনটি বুটস্ট্র্যাপ 4 এ কাজ করছিল না অবশেষে আমি বুটস্ট্র্যাপ 4 ডকুমেন্টেশনে পেয়েছি।

বুটস্ট্র্যাপ 3 এবং 4

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

সূত্র: http://v4-alpha.getbootstrap.com/content/typography/#inline

Answer 7

এই সমাধানটি বুটস্ট্র্যাপ ভি 2 ব্যবহার করে কাজ করে, তবে টিবিএস 3-তে ক্লাস ইনলাইন। টিবিএস 3 তে সমমানের শ্রেণিটি (যদি থাকে তবে) কী তা জানতে পারি নি।

এই ভদ্রলোক v2 এবং v3 মধ্যে পার্থক্য একটি সুন্দর ভাল নিবন্ধ ছিল।

http://mattduchek.com/differences-between-bootstrap-v2-3-and-v3-0/

সম্পাদনা করুন - liনীচের মত আপনার সমস্যা সমাধানের জন্য উপাদানগুলিকে লক্ষ্য করতে সিএসএস ব্যবহার করুন

    { display: inline-block; }

আমার পরিস্থিতিতে আমি এলআইয়ের পরিবর্তে উলটিকে টার্গেট করছিলাম

    nav ul li { display: inline-block; }

Answer 8

ইনলাইন আসলে আমাদের যে ইনলাইনটির প্রয়োজন হতে পারে তা নয় - যেমন প্রদর্শন: ইনলাইন

যতক্ষণ না আমি পর্যবেক্ষক হিসাবে বুটস্ট্র্যাপ ইনলাইনটি অনুভূমিক প্রবণতা বেশি

অন্যান্য উপাদানগুলির সাথে তালিকাটি ইনলাইন প্রদর্শনের জন্য আমাদের প্রয়োজন

display: inline; added to the UL

<ul class="unstyled inline" style="display:inline">

এনবি // স্টাইলশিটে যুক্ত করুন

Answer 9

বুটস্ট্র্যাপ ডকুমেন্টেশন অনুসারে আপনার তালিকায় আপনার ক্লাসটি 'ইনলাইন' যুক্ত করা দরকার; এটার মত:

<ul class="inline">
    <li>Item one</li>
    <li>Item two</li>
    <li>Item three</li>
</ul>

তবে এটি কাজ করে না বলে মনে হয় বুটস্ট্র্যাপ সিএসএস ফাইলে 'ইনলাইন' শ্রেণিটি উল্লেখ করে কিছু সিএসএস নিখোঁজ রয়েছে। সুতরাং অতিরিক্তভাবে, আপনার সিএসএস ফাইলটিতে এটি কাজ করতে নিম্নলিখিত লাইনগুলি যুক্ত করুন:

ul.inline > li, ol.inline > li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
}