টুইটার বুটস্ট্র্যাপ ডানদিকে ভাসা


142

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

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
 .container {
    margin-top: 10px;
}
<div class="container">
    <div class="row-fluid">
        <div class="span6">
            <p>Text left</p>
        </div>
        <div class="span6 pull-right">
            <p>text right</p>
        </div>
    </div>
</div>


আপনি পাঠ্য ভাসতে চান ?? text-align
সিএসএসে

বুটস্ট্র্যাপে যদিও কোনও বিল্ট ইন (স্ট্যান্ডার্ড) উপায় নেই?
জাস্টিন

উত্তর:


85

আপনার সারির মধ্যে আপনার দুটি স্প্যান div ডিভ রয়েছে যাতে এটি একটি সারিতে তৈরি পুরো 12 টি স্প্যান গ্রহণ করবে।

দ্বিতীয় স্প্যান div ডিভ-এ টান-ডান যোগ করা এটি ইতিমধ্যে ডানদিকে বসে থাকার কারণে এটি কিছুই করতে যাচ্ছে না।

যদি আপনি বোঝাতে চান যে আপনি দ্বিতীয় স্প্যান div বিভাগে পাঠ্যটি ডানদিকে প্রান্তিকিত করতে চান তবে সাধারণভাবে সেই ডিভটিতে একটি নতুন শ্রেণি যুক্ত করুন এবং এটি পাঠ্য-প্রান্তিককরণ দিন: সঠিক মান যেমন

.myclass {
    text-align: right;
}

হালনাগাদ:

এরিকফ্রি চিহ্নিত করেছেন যে বুটস্ট্র্যাপের ২.৩ প্রকাশে (গত সপ্তাহে) তারা ব্যবহার করতে পারেন এমন পাঠ্য-সারিবদ্ধ ইউটিলিটি ক্লাস যুক্ত করেছে:

  • .text-left
  • .text-center
  • .text-right

http://twitter.github.com/bootstrap/base-css.html#typography


5
দেখে মনে হচ্ছে তারা পাঠ্য সমতলতা জন্য ইউটিলিটি শ্রেণীর যোগ 2.3 : .text-left, .text-center, এবং.text-right
এরিক Freese

1
@ এরিকফ্রিজে - আপনি ঠিক বলেছেন - সেই আপডেটটি লক্ষ্য করা যায়নি - আমি আমার উত্তর আপডেট করেছি।
বিলি মোয়াট

এটি গ্রহণযোগ্য উত্তর হওয়া উচিত নয়। বুটস্ট্র্যাপ শ্রেণিতে একটি বিল্ট রয়েছে যার নাম pull-right(ক্রেডিট @ অ্যামিট); আইএমও, এটি একটি অন্তর্নির্মিত বুটস্ট্র্যাপ ক্লাস ব্যবহার করা পরিষ্কার ... এবং ওপি তার প্রশ্নের জন্য জিজ্ঞাসা করেছেন
কলব ক্যানিয়ন

107

ডানদিকে একটি ডিভ ভাসা pull-rightপ্রস্তাব প্রস্তাব, আমি মনে করি আপনি সঠিকভাবে কাজ করছেন আপনি সম্ভবত ব্যবহারের প্রয়োজন হতে পারেtext-align:right;

  <div class="container">
     <div class="row-fluid">
      <div class="span6">
           <p>Text left</p>
      </div>
      <div class="span6 pull-right" style="text-align:right">
           <p>text right</p>
      </div>
  </div>
 </div>      
 </div>

অপ্রত্যাশিতভাবে pull-rightসংস্করণ 3.1 সহ অবচিত করা হয়েছিল: getbootstrap.com/components/#DPdowns-alignment
ǝlǝ

12
@ .lǝ ".. আমরা অবচয় রেখেছি । ড্রপডাউন মেনুতে ডানদিকে ডান ।" এটি অন্যান্য টান-ডান ব্যবহারের ক্ষেত্রে প্রযোজ্য নয়।
ব্যবহারকারী 2864740

78

ডিভের মধ্যে পাঠ্য সারিবদ্ধ করার জন্য বুটস্ট্র্যাপ 3 এর একটি শ্রেণি রয়েছে

<div class="text-right">

ডানদিকে পাঠ্য প্রান্তিককরণ করা হবে

<div class="pull-right">

সমস্ত লিখিত সামগ্রীটি কেবল ডানদিকে টানবে


text-right, text-leftএবং text-centerপুরোপুরি কাজ করে। এবং সেই অনুযায়ী ধারকটির সাথে পাঠ্যটিকে সারিবদ্ধ করে।
আনিস নায়ার

ধন্যবাদ @ বুজনকোগোজ, প্রকৃতপক্ষে ৩.১-তে ড্রপডাউন মেনুগুলির জন্য টান-ডানকে অবমূল্যায়ন করা হয়েছে: getbootstrap.com/components/#DPdowns-alignment
ǝlǝ

27

কোনও কৌশলটি ইনলাইন শৈলী যুক্ত করার প্রয়োজন ছাড়াই এটি করে

<div class="row-fluid">
    <div class="span6">
        <p>text left</p>
    </div>
    <div class="span6">
        <div class="pull-right">
            <p>text right</p>
        </div>
    </div>
</div>

উত্তরটি <div>"টান-ডান" শ্রেণি দিয়ে অন্যকে বাসা বাঁধে । দুটি শ্রেণীর সংমিশ্রণটি কাজ করবে না।


1
এটি সঠিক উত্তর হওয়া উচিত। বুটস্ট্র্যাপের বিষয়টি হ'ল সরাসরি শৈলীর সাথে মোকাবেলা করা এড়ানো।
ক্রিস্টেন ওয়েট

18
<p class="pull-left">Text left</p>
<p class="text-right">Text right in same line</p>

আমার জন্য এই কাজ।

সম্পাদনা করুন: আপনার স্নিপেটের সাথে একটি উদাহরণ:

@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.css');
 .container {
    margin-top: 10px;
}
<div class="container">
    <div class="row-fluid">
        <div class="span6 pull-left">
            <p>Text left</p>
        </div>
        <div class="span6 text-right">
            <p>text right</p>
        </div>
    </div>
</div>


3

আপনি বাম বা ডানদিকে পাঠ্য-কেন্দ্রের মতো শ্রেণীর নাম নির্ধারণ করতে পারেন। পাঠ্যটি এই শ্রেণীর নাম অনুসারে সারিবদ্ধ হবে। আপনার আলাদা শ্রেণীর নাম আলাদা করার দরকার নেই। এই ক্লাসগুলি বুটস্ট্র্যাপ 3 এবং বুটস্ট্র্যাপ 4 এ নির্মিত।

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

v3 পাঠ্য প্রান্তিককরণ ডক্স

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

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

v4 পাঠ্য প্রান্তিককরণ ডক্স

<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.