ডান সারিবদ্ধ করার জন্য আমি কীভাবে আমার টুইটার বুটস্ট্র্যাপ বোতাম পেতে পারি?

Question

আমার এখানে একটি সাধারণ ডেমো রয়েছে:

http://jsfiddle.net/HdeZ3/1/

<ul>
    <li>One <input class="btn pull-right" value="test"></li>
    <li>Two <input class="btn pull-right" value="test2"></li>
</ul>

আমার একটি আনর্ডারড তালিকা রয়েছে এবং প্রতিটি তালিকার আইটেমের জন্য আমি বামে টেক্সট রাখতে চাই এবং তার পরে ডান সারিবদ্ধ বোতামটি চাই। আমি পুল-ডান ব্যবহার করার চেষ্টা করেছি কিন্তু এটি সম্পূর্ণরূপে অ্যালাইনমেন্টটি গণ্ডগোল করে। আমি কি ভুল করছি?

Comments

কেন এই প্রশ্নের সঙ্গে বাঁধা হয় টুইটারের বুটস্ট্র্যাপ -3 এবং টুইটার-বুটস্ট্র্যাপ-2 সেইসাথে টুইটার-বুটস্ট্র্যাপ ?

— অ্যান্ড্রু গ্রিম

কারণ এটি 3/2013 সাল থেকে সমস্ত সংস্করণের সাথে প্রাসঙ্গিক

— জিম

Answer 1

ঢোকান pull-rightক্লাসটি মধ্যে এবং বুটস্ট্র্যাপ বোতাম ব্যবস্থা করা যাক।

জন্য বুটস্ট্র্যাপ 2.3 , দেখুন: http://getbootstrap.com/2.3.2/components.html#misc > সাহায্যকারী শ্রেণীর> .pull-ডান।

জন্য বুটস্ট্র্যাপ 3 , দেখুন: https://getbootstrap.com/docs/3.3/css/#helper-classes > সাহায্যকারী ক্লাস।

---

জন্য বুটস্ট্র্যাপ 4 , দেখুন: https://getbootstrap.com/docs/4.0/utilities/float/#responsive

pull-rightকমান্ড সরানো হয়েছে এবং দিয়ে প্রতিস্থাপিত float-rightবা সাধারণ করার জন্যfloat-{sm,md,lg,xl}-{left,right,none}

Comments

আমি এই উত্তর বুঝতে পারি না। প্রশ্নে উদাহরণ কোডটি ইতিমধ্যে ব্যবহার করছে pull-right।

— guivial

@ জিভাল আমি একই জিনিসটি ভাবছিলাম। stackoverflow.com/a/26546770/470749 বোঝায় যে buttonপরিবর্তে ব্যবহার করা inputএকটি পার্থক্য তৈরি করবে।

— রায়ান

@ রায়ান এটি আমার এবং ইনপুট এবং বোতাম উভয়ই কাজ করে

— লেস্টার

@ অ্যারোনডাল এটি আমার পক্ষে কাজ, ধন্যবাদ!

— হুয়ারি জেগাই

Answer 2

টুইটার বুটস্ট্র্যাপ 3 এ ক্লাস -ডানদিকে চেষ্টা করুন

class="btn pull-right"

Comments

আর নয়, এটি v 3.1 হিসাবে অবচিত করা হয়েছে: getbootstrap.com/components/#DPdowns-alignment

— ǝlǝ

পরিবর্তনটি হাইলাইট করার জন্য +1। তবে এই অবমূল্যায়নটি কেবল ড্রপ ডাউন মেনুর জন্য যা .ড্রপডাউন-মেনু-ডান দ্বারা প্রতিস্থাপিত হয়েছে। এটি সামগ্রিকভাবে হ্রাস করা হয়নি।

— শন ভাদার

আপনি ঠিক বলেছেন, ডকুমেন্টেশনটি বলেছেwe've deprecated .pull-right on dropdown menus

— ılǝ

আমাকে বাইরের বিটিএন-গ্রুপ

— ডিভায়

pull-rightব্যবহার করে float: right, যার ফলে একে অপরের শীর্ষে উল্লম্ব সামগ্রীগুলি ভেঙে যায়। ডিআইভি দিয়ে বোতামটি text-rightএভাবে মুড়িয়ে দিন -<div class="text-right">button...</div>

— হ্যাশব্রাউন

Answer 3

"টান-ডান" শ্রেণিটি সঠিক উপায় নাও হতে পারে কারণ পাঠ্য-বিন্যাসের পরিবর্তে "ফ্লোট: ডান" ব্যবহার করা হয়।

বুটস্ট্র্যাপ 3 সিএসএস ফাইল চেক করাতে আমি 457 লাইনে "পাঠ্য-ডান" শ্রেণি পেয়েছি text পাঠকের ডানদিকে সারিবদ্ধ করার জন্য এই শ্রেণীর সঠিক উপায় হওয়া উচিত।

কিছু কোড:

<div class="row">
    <div class="col-xs-12">
        <div class="text-right">
            <button type="button" class="btn btn-default">Default</button>
        </div>
    </div>
</div>

Comments

আমি মনে করি এটি টান-ডানর চেয়ে ভাল কারণ এটি উল্লম্ব বিষয়বস্তুকে একে অপরের উপরের অংশকে ভেঙে ফেলা থেকে বাধা দেয় এবং কেবল এটির জন্য আরও বেশি চিহ্ন যোগ করতে এড়ানো যায় ids

— টনি ওয়াল

ধন্যবাদ. "টান-ডান" সমস্যাটি হ'ল এটি বোতামগুলি থেকে কোনও মার্জিন সরিয়ে দেয়। এটি মার্জিন বজায় রাখে তবে উপাদানগুলিকে ডানে সরিয়ে দেয়। পারফেক্ট!

— পিআর হোয়াইটহেড

কেন টেক্সট-রাইটটি অবশ্যই এই বোতামটি কেবল বোতামের পরিবর্তে ডিভাইসে থাকতে হবে class="btn btn-default text-right"???

— ক্রিস্টিয়ান পোলস্কা

Answer 4

2019 আপডেট করুন - বুটস্ট্র্যাপ 4.0.0

pull-rightশ্রেণী এখন float-rightবুটস্ট্র্যাপ 4 ...

    <div class="row">
        <div class="col-12">One <input type="button" class="btn float-right" value="test"></div>
        <div class="col-12">Two <input type="button" class="btn float-right" value="test"></div>
    </div>

http://www.codeply.com/go/nTobetXAwb

উল তালিকাটি সারিবদ্ধ না করা এবং সারিগুলির জন্য ব্লক উপাদানগুলি ব্যবহার না করা ভাল।

হয় float-rightএখনও কাজ করছে না?

মনে রাখবেন যে বুটস্ট্র্যাপ 4 এখন ফ্লেক্সবক্স , এবং অনেকগুলি উপাদান display:flexযা ভাসমান- ডানাকে কাজ করা থেকে বিরত করতে পারে। কিছু ক্ষেত্রে, ব্যবহারের ক্লাসগুলি বুটস্ট্র্যাপ 4 .রো, কার্ড বা নাভের মতো ফ্লেক্সবক্স ধারকের ভিতরে থাকা উপাদানগুলিকে ডানদিকে প্রান্তিককরণ করতে পছন্দ করে align-self-endবা ml-autoকাজ করে।

এছাড়াও মনে রাখবেন যে text-rightএখনও ইনলাইন উপাদানগুলিতে কাজ করে।

বুটস্ট্র্যাপ 4 সঠিক উদাহরণ সারিবদ্ধ করুন

---

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

pull-rightক্লাস ব্যবহার করুন ।

Comments

তারা আমার জন্য কাজ করছে, তবে আপনাকে লিঙ্কগুলির উপর নির্ভর করার দরকার নেই। কীভাবে ডান সারিবদ্ধ করা যায় তার একটি ব্যাখ্যা জন্য উত্তরটি পড়ুন।

— জিম

Answer 5

buttonপরিবর্তে ট্যাগ ব্যবহার করুন inputএবং pull-rightক্লাস ব্যবহার করুন ।

pull-right ক্লাসটি আপনার উভয় বোতামকে পুরোপুরি বিভ্রান্ত করে, তবে ডানদিকে কাস্টম মার্জিন সংজ্ঞায়িত করে আপনি এটি ঠিক করতে পারেন।

<button class="btn btn-primary pull-right btn-sm RbtnMargin" type="button">Save</button>
<button class="btn btn-primary pull-right btn-sm"  type="button">Cancel</button>

তারপরে ক্লাসের জন্য নিম্নলিখিত সিএসএস ব্যবহার করুন

.RbtnMargin { margin-left: 5px; }

Answer 6

গৃহীত উত্তরের সাথে যোগ করার পরে, বুটস্ট্র্যাপ থেকে প্যাডিংয়ের মধ্যে তৈরি কন্টেইনার এবং কলামগুলির মধ্যে কাজ করার সময়, আমার মাঝে মাঝে একটি শিশু ডিভ সহ একটি পূর্ণ প্রসারিত কলাম থাকে যা যাওয়ার পথে টানতে পারে।

<div class="row">
  <div class="col-sm-12">
      <div class="pull-right">
            <p>I am right aligned, factoring in container column padding</p>
      </div>
  </div>
</div>

অন্যথায়, আপনার সমস্ত কলামগুলিতে প্রথম কলামটি অফসেট হওয়ার পাশাপাশি আপনার মোট গ্রিড কলামগুলি (ডিফল্টরূপে 12) যোগ করুন up

<div class="row">
  <div class="col-sm-4 col-sm-offset-4">
        This content and its sibling..
  </div>
  <div class="col-sm-4">
        are right aligned as a whole thanks to the offset on the first column and the sum of the columns used is the total available (12).
  </div>
</div>

Answer 7

পুরানো ইতিমধ্যে উত্তর দেওয়া প্রশ্নের জবাব দেওয়ার জন্য দুঃখিত, তবে আমি ভেবেছিলাম যে আমি আপনার বেশিরভাগ কারণেই জেসফিল ​​কাজ করে না বলে উল্লেখ করেছি, অন্যরা যদি এটি পরীক্ষা করে দেখে এবং অবাক হয় যে গ্রহণযোগ্য উত্তরে বর্ণিত টান-ডান শ্রেণি কেন না করে সেখানে কাজ করব না।

1. বুটস্ট্র্যাপ সিএসএস ফাইলের url অবৈধ। (আপনি প্রশ্ন জিজ্ঞাসা করার সময় সম্ভবত এটি কাজ করেছিল)।
2. আপনার ইনপুট উপাদানটিতে টাইপ করুন = "বোতাম" যুক্ত করা উচিত, বা এটি একটি বোতাম হিসাবে রেন্ডার করা হবে না - এটি একটি ইনপুট বাক্স হিসাবে রেন্ডার হবে। আরও ভাল, <button>পরিবর্তে উপাদান ব্যবহার করুন।
3. অতিরিক্তভাবে, কারণ টান-ডান ফ্লোট ব্যবহার করে, আপনি বোতামের লেআউটটি কিছুটা চমকপ্রদ পাবেন কারণ প্রতিটি এলআই-তে বোতামের উচ্চতা সামঞ্জস্য করার পর্যাপ্ত উচ্চতা নেই। এলআইতে কিছু লাইন-উচ্চতা বা ন্যূনতম-উচ্চতার সিএসএস যুক্ত করা এটিকে সম্বোধন করবে।

কাজ করা ফিডল: http://jsfiddle.net/3ejqufp6/

<ul>
  <li>One <input type="button" class="btn pull-right" value="test"/></li>
  <li>Two <input type="button" class="btn pull-right" value="test2"/></li>
</ul>

(আমি পৃথক পৃথক প্রস্থের কারণে বোতামগুলিতে একটি র‌্যাগড ডান-ন্যায়সঙ্গত বর্ণের চেহারাটি দাঁড়াতে না পারায় আমি বোতামগুলির সাথে একটি মিনিট প্রস্থও যুক্ত করেছি))

Answer 8

বুটস্ট্র্যাপ pull-rightসাহায্যকারী ব্যবহার করা আমাদের পক্ষে কাজ করে না কারণ এটি ব্যবহার করে float: right, যা উপাদানগুলিকে পরিণত হতে বাধ্য inline-blockকরেblock । এবং যখন তারা .btnহয়ে ওঠে block, তখন তারা প্রাকৃতিক ব্যবধানটি হারাবে inline-blockযা তাদেরকে অর্ধ-পাঠ্য উপাদান হিসাবে সরবরাহ করে।

সুতরাং পরিবর্তে আমরা direction: rtl;প্যারেন্ট উপাদানটি ব্যবহার করেছি , যার ফলে সেই উপাদানটির ভিতরে থাকা পাঠ্যটি ডান থেকে বামে লেআউট তৈরি করে এবং এর ফলে inline-blockউপাদানগুলিকে ডান থেকে বামেও বিন্যাসে ডেকে আনে। বাচ্চাদের rtlখুব শিথিল করা থেকে রোধ করতে আপনি নীচের মতো কম ব্যবহার করতে পারেন :

/* Flow the inline-block .btn starting from the right. */
.btn-container-right {
  direction: rtl;

  * {
    direction: ltr;
  }
}

এবং এটি ব্যবহার করুন:

<div class="btn-container-right">
    <button class="btn">Click Me</button>
</div>

Answer 9

ইন বুটস্ট্র্যাপ 4 : flexbox সঙ্গে এই পদ্ধতি ব্যবহার করে দেখুন। Getbootstrap ডকুমেন্টেশন দেখুন

<div class="row">
  <div class="col-md">
    <div class="d-flex justify-content-end">
      <button type="button" class="btn btn-default">Example 1</button>
      <button type="button" class="btn btn-default">Example 2</button>
    </div>
  </div>
</div>

Answer 10

ডানদিকে টানুন v3.1.0 হিসাবে অবচয় করা হয়েছিল। শুধু একটি মাথা আপ.

http://getbootstrap.com/components/#callout-dropdown-pull-right

Comments

pull-rightঅবচয় হয় dropdown-menu। এটি এখনও অন্যান্য উপাদানগুলির জন্য ব্যবহার করা যেতে পারে।

— পিটার

Answer 11

pull-rightবোতামটির জন্য ক্লাস প্রয়োগ করুন । http://getbootstrap.com/css/#helper-class-floats -> সহায়ক ক্লাস

এই লিঙ্কটি সাহায্য করবে

Answer 12

এখন আপনাকে বিদ্যমান .ড্রপডাউন-মেনু উপাদানটিতে ডাবলড্রাউন-মেনু-ডান যুক্ত করতে হবে। টান-ডান আর সমর্থিত নয়। এখানে আরও তথ্য http://getbootstrap.com/compferences/#btn-DPdowns

Answer 13

কোনও পরিবর্তন আছে কিনা তা দেখতে আপনি কি বুটস্ট্র্যাপ সিএসএসের পাশে একটি কাস্টম সিএসএস চেষ্টা করতে পারেন? চেষ্টা

.move-rigth{
    display: block;
    float: right;
}

যদি এটি কাজ করে তবে আপনি যা আছে তা নিয়ে ম্যানিপুলেট করার চেষ্টা করতে পারেন বা এটিতে অন্য ফর্ম্যাট যুক্ত করতে এবং আপনার ইচ্ছামত অর্জন করতে পারেন। যেহেতু আপনি বুটস্ট্র্যাপ ব্যবহার করছেন তার অর্থ এই নয় যে এটি যদি আপনি যা চান তা আপনাকে না দেয় তবে আপনি কেবল এটি পরিচালনা করেন। আপনি আপনার কোডগুলি নিয়ে কাজ করছেন এবং তাই আপনি এটি হিসাবে আপনার কমান্ডকে আদেশ দিন। চিয়ার্স!

Comments

কাস্টম

— সিএসএসের

@ ক্রিসওয়েব আপনার যদি এমন কিছু প্লাগইন থাকে যা একই সিএসএস শ্রেণি ভাগ করে নিয়ে থাকে যা আপনাকে অজানা এবং বিরোধী সমস্যাগুলি করে, আপনি কী করবেন? কাস্টম সিএসএস তৈরি করার চেয়ে বসে এবং দেখুন? অন্য কোনও প্লাগইন যুক্ত করা হয়েছিল যা একই সিএসএস ক্লাস ভাগ করতে পারে যদি ওপি কখনই নির্দিষ্ট করে দেয় না।

— ওমনিপটেনস

Answer 14

<ul>
    <li class="span4">One <input class="btn btn-small" value="test"></li>
    <li class="span4">Two <input class="btn btn-small " value="test2"</li>
</ul>

আমি স্রেফ লেআউট ব্যবহার করেছি .. লি জন্য শৈলী প্রয়োগ করুন ..

অথবা

<ul>
    <li>One <input class="btn" value="test"></li>
    <li>Two <input class="btn" value="test2"</li>
</ul>

সিএসএসে

li {
    line-height: 20px;
    margin: 5px;
    padding: 2px;
}

Comments

আমার জন্য এটি উভয় তালিকা আইটেমগুলিকে একক লাইনে রাখে

— ডেল্টানভেমবার

Answer 15

আপনি বাম দিকে ফাঁকা স্থান দেওয়ার জন্য খালি কলামগুলিও ব্যবহার করতে পারেন

মত

<div class="row">
    <div class="col-md-8"></div>  <!-- blank space increase or decrease it by column # -->
        <div class="col-md-4">
            <button id="saveedit" name="saveedit" class="btn btn-success">Save</button>
        </div>
</div>

ডেমো :: জেফফিল ডেমো

Answer 16

থেকে বুটস্ট্র্যাপ V3.3.1 নিম্নলিখিত CSS স্টাইল এই সমস্যা সমাধান হবে

.modal-open{
    padding-right: 0 !important;
}

দ্রষ্টব্য: আমি উপরের পোস্টগুলিতে সমস্ত পরামর্শ এবং সমস্ত ঠিকানা পুরানো সংস্করণে চেষ্টা করেছি এবং নতুন সেট বুটস্ট্র্যাপ সংস্করণগুলিতে কোনও সমাধান সরবরাহ করি না।

Answer 17

বুটস্ট্র্যাপ 4 ডকুমেন্টেশন জন্য

  <div class="row justify-content-end">
    <div class="col-4">
      Start of the row
    </div>
    <div class="col-4">
      End of the row
    </div>
  </div>

Comments

ডান এবং বোতামগুলি সারিবদ্ধ করার সাথে এটির কী দরকার?

— জিম