টুইটার বুটস্ট্র্যাপ 3-এ কল-এলজি-পুশ এবং কল-এলজি-পুল ব্যবহার করে কলাম অর্ডার ম্যানিপুলেশন

Question

আমি এখন টুইটার বুটস্ট্র্যাপ 3 এ ডকুমেন্টেশন পড়ছি, এবং এই পৃষ্ঠায় প্রদর্শিত কলাম ক্রম অনুসরণ করার চেষ্টা করেছি তবে প্রাচীরটিকে আঘাত করব। আমি বুঝতে পারি না যে এই জাতীয় কোড কেন কাজ করে না কীভাবে সঠিকভাবে সেটিংস নির্দিষ্ট করতে হয়। আমি যা দেখতে চাই তা হ'ল একটি গ্রিড যা দৈর্ঘ্য 5 এবং অন্য দৈর্ঘ্য 5 এবং অবশেষে একটি দৈর্ঘ্য 2 গ্রিড সমন্বিত।

সুতরাং আমার এইরকম কিছু:

[5] [5] [2]

এবং আমি যেটি অর্জন করতে চাই তা হ'ল, যখন এটি ডেস্কটপে প্রদর্শিত হবে উপরের লেআউটটি প্রদর্শিত হবে, তবে যখন এটি মোবাইলে দেখা হবে, আমি দ্বিতীয় দৈর্ঘ্য 5 অবজেক্টটি প্রথমে, তারপরে প্রথম দৈর্ঘ্যের 5 অবজেক্ট এবং শেষ পর্যন্ত দৈর্ঘ্য 2 অবজেক্টটি দেখাতে চাই , উল্লম্বভাবে। এটার মত:

[5] (second)
[5] (first)
[2]  

আমি উপরের ডকুমেন্টেশনে বর্ণিত পদক্ষেপটি অনুসরণ করার চেষ্টা করার সময়, আমি মোবাইল প্ল্যাটফর্মে থাকা সত্ত্বেও দ্বিতীয়টির চেয়ে প্রথম দৈর্ঘ্য 5 অবজেক্টটি পেয়েছি, যা আমি বলেছিলাম উপরে দ্বিতীয় দৈর্ঘ্যের 5 টি বস্তু প্রদর্শন করা উচিত। অন্য কথায়, আমি এটি পেয়েছি:

[5] (first)
[5] (second)
[2] 

সুতরাং আমি প্রথমটির উপরে দ্বিতীয়টিকে সঠিকভাবে কীভাবে রাখতে পারি? বা যেহেতু আমি একই দৈর্ঘ্যের অবজেক্টটি ব্যবহার করি, তাই কলামটি অর্ডারটি কাজ করতে পারে না?

আপনার তথ্যের জন্য আমার কোডটি এখানে:

<div class='row'>
<div class='col-lg-5 col-lg-push-5'></div>
<div class='col-lg-5 col-lg-pull-5'></div>
<div class='col-lg-2'></div>
</div>

এছাড়াও, ডকুমেন্টেশনগুলির অর্থ pullবা কী তা বোঝা যায় না push। আমি কি কিছু মিস করছি?

ধন্যবাদ।

Comments

ক্লাস = "কল-এলজি -5 কল-এসএম -5 কল-এসএম-পুশ -5" চেষ্টা করুন এবং টানার সাথে ২ য় সমান

— দাউদ আওয়ান

একটি সহজ এবং স্পষ্ট উদাহরণ (এটি 2 কলামের বিন্যাসের জন্য, তবে আপনি এখনই পয়েন্টটি পেয়ে যাবেন এবং প্রয়োজন হিসাবে অতিরিক্ত কলস যুক্ত করতে সক্ষম হবেন) "ধাক্কা ও টানুন - কলামের ক্রম পরিবর্তন করুন শিরোনাম" শীর্ষক পৃষ্ঠায় নীচের অংশে পাওয়া যাবে Change ": w3schools.com

— টাইলার রাফার্টি

Answer 1

এই উত্তরটি তিন ভাগে রয়েছে, সরকারী মুক্তির জন্য নীচে দেখুন (v3 এবং v4)

আমি ডাউনলোড করা আরসি 1 এর মূল ফাইলগুলিতে কল-এলজি-পুশ-এক্স বা ক্লাস টানতেও পেলাম না, সুতরাং আপনার বুটস্ট্র্যাপ.এসএস ফাইলটি পরীক্ষা করে দেখুন। আশা করি এটি এমন কিছু যা তারা আরসি 2 এর মধ্যে বাছাই করবে।

যাইহোক, কর্নেল-পুশ- * এবং টান ক্লাসগুলি উপস্থিত ছিল এবং এটি আপনার প্রয়োজন অনুসারে হবে। এখানে একটি ডেমো রয়েছে

<div class="row">
    <div class="col-sm-5 col-push-5">
        Content B
    </div>
    <div class="col-sm-5 col-pull-5">
        Content A
    </div>
    <div class="col-sm-2">
        Content C
    </div>
</div>

সম্পাদনা করুন: নীচে অফিসিয়াল রিলিজ v3.0 এর উত্তর রয়েছে

বিষয়টিতে এই ব্লগ পোস্টটি দেখুন

• col-vp-push-x= দ্বারা ডানদিকে কলাম ধাক্কা এক্স কলামের সংখ্যা থেকে যেখানে কলাম স্বাভাবিকভাবে রেন্ডার হবে শুরু -> position: relativeএকটি উপর ভিপি বা বৃহত্তর দেখার পোর্ট।

• col-vp-pull-x= দ্বারা বামে কলাম টান এক্স কলামের সংখ্যা থেকে যেখানে কলাম স্বাভাবিকভাবে রেন্ডার হবে শুরু -> position: relativeএকটি উপর ভিপি বা বৃহত্তর দেখার পোর্ট।

  ভিপি = এক্স, এসএম, এমডি বা এলজি

  x = 1 এর মাধ্যমে 12

আমি মনে করি যে বেশিরভাগ লোককে কী গোলযোগ দেয়, তা হ'ল আপনাকে আপনার এইচটিএমএল মার্কআপে কলামগুলির ক্রম পরিবর্তন করতে হবে (নীচের উদাহরণে, বি এ এর ​​আগে আসবে) , এবং এটি কেবল ভিউ-পোর্টগুলিতে ধাক্কা বা টান দেয় যা যা নির্দিষ্ট করা হয়েছিল তার চেয়ে বড় বা সমান। উদাহরণস্বরূপ col-sm-push-5, smভিউ-পোর্ট বা ততোধিক 5 টির উপরে কেবল 5 টি কলাম টিপবে। এটি কারণ বুটস্ট্র্যাপ একটি "মোবাইল প্রথম" কাঠামো, তাই আপনার এইচটিএমএল আপনার সাইটের মোবাইল সংস্করণ প্রতিবিম্বিত করা উচিত। এরপরে পুশিং এবং পুলিং বড় স্ক্রিনে করা হয়।

• (ডেস্কটপ) বৃহত্তর ভিউ-বন্দরগুলি ধাক্কা দিয়ে টেনে নিয়ে যায়।
• (মোবাইল) ছোট ক্রমবন্দরগুলি স্বাভাবিক ক্রমে রেন্ডার করে।

ডেমো

<div class="row">
    <div class="col-sm-5 col-sm-push-5">
        Content B
    </div>
    <div class="col-sm-5 col-sm-pull-5">
        Content A
    </div>
    <div class="col-sm-2">
        Content C
    </div>
</div>

ভিউ-পোর্ট> = এসএমএ

|A|B|C|

ভিউ-পোর্ট <এসএমএল

|B|
|A|
|C|

সম্পাদনা করুন: নীচে v4.0 এর উত্তর রয়েছে

ভি 4 এর সাথে ফ্লেক্সবক্স এবং গ্রিড সিস্টেমে অন্যান্য পরিবর্তন আসে এবং ফ্লেসবক্স ক্রম ব্যবহারের পক্ষে পুশ-পুল ক্লাসগুলি সরানো হয়েছে।

• .order-*ভিজ্যুয়াল অর্ডার নিয়ন্ত্রণের জন্য ক্লাস ব্যবহার করুন (যেখানে * = 1 থেকে 12)
• এটি গ্রিড স্তর নির্দিষ্টও হতে পারে .order-md-*
• এছাড়াও .order-first(-1) এবং .order-last(13) আসা

<div class="row">
  <div class="col order-2">1st yet 2nd</div>
  <div class="col order-1">2nd yet 1st</div>
</div>

Comments

ধন্যবাদ। গিথুব সংগ্রহশালা থেকে আমি ক্লোন করেছি এমনগুলিতে আমার আমদানিযোগ্য স্ক্রিপ্টগুলি পরিবর্তন করেছে, তারপরে এটি প্রত্যাশার মতো কাজ করেছিল। প্রাথমিক স্ক্রিপ্টগুলি col-lg-pushআপনি যেমন বলেছিলেন তেমন অন্তর্ভুক্ত করা হয়নি । অনেক ধন্যবাদ.

— ব্লেজার্ড

ধন্যবাদ, যতটা আমি ধরে নিছিলাম তার চেয়েও বেশি বেশি আমাকে ধরা পড়ল কারণ এটি কম হবে। তবে আমার ধারণা মোবাইল-প্রথম দেব, এটি বোধগম্য।

— এলিরিওন

আমি মনে করি দ্বিতীয় বিকল্পটি "<= এসএম" ঠিক "<" হওয়া উচিত, যেহেতু তারা উভয়ই "=" থাকতে পারে না

— শন টেলর

কলামগুলির ক্রমটি ফ্লিপ করুন (মোবাইল প্রথম), এটাই কৌশল! ধন্যবাদ!

— উইটস

বুটস্ট্র্যাপ ভি 4-তে তাদের এখন নাম দেওয়া হয়েছে {পুশ / পুল} - {ভিপি} - {1-12}, যেমন - পুশ-এমডি -4

— পাস্কল

Answer 2

ব্রাউজারের বাম দিকে ডিভটি "টানুন" এবং ব্রাউজারের বামদিক থেকে ডিভকে "পুশ" করুন।

ভালো লেগেছে:

সুতরাং মূলত যে কোনও ওয়েব পৃষ্ঠার 3 টি কলাম লেআউটে "সেন্টার" এবং "মোবাইল" ভিউতে "মেইন বডি" পৃষ্ঠার "শীর্ষে" উপস্থিত হয়। এটি বেশিরভাগই 3 কলাম লেআউট সহ প্রত্যেকের পছন্দসই।

<div class="container">
    <div class="row">
        <div id="content" class="col-lg-4 col-lg-push-4 col-sm-12">
        <h2>This is Content</h2>
        <p>orem Ipsum ...</p>
        </div>

        <div id="sidebar-left" class="col-lg-4  col-sm-6 col-lg-pull-4">
        <h2>This is Left Sidebar</h2>
        <p>orem Ipsum...</p>
        </div>


        <div id="sidebar-right" class="col-lg-4 col-sm-6">
        <h2>This is Right Sidebar</h2>
        <p>orem Ipsum.... </p>
        </div>
    </div>
</div>

আপনি এটি এখানে দেখতে পারেন: http://jsfiddle.net/DrGeneral/BxaNN/1/

আশা করি এটা সাহায্য করবে

Comments

"মার্জিন বরাদ্দ করুন" না এবং চাপুন। তারা কলাম ক্রম পরিবর্তন। আপনার উদাহরণস্বরূপ, সামগ্রী কলামটি সাধারণত বড় আকারে 1-4 কলামগুলি দখল করে এবং সাইডবার কলামটি 5-8 কলামগুলি দখল করে। এটি মার্কআপে তাদের আদেশের ভিত্তিতে। আপনি মার্কআপে তাদের পরিবর্তন করে তাদের অর্ডার পরিবর্তন করতে পারেন, তবে যদি কোনও কারণে আপনি না চান (উদাহরণস্বরূপ কোডটি প্রথমে মূল বিষয়বস্তু দিয়ে আরও শব্দার্থক করে তোলা) তবে আপনি তাদের ক্রমটি পুশ এবং টান ক্লাসের মাধ্যমে পরিবর্তন করতে পারেন।

— টি এনগুইন

(চালিয়ে যাওয়া) আপনার উদাহরণে, 4 টি কলামগুলিকে 'চাপ' দিয়ে 1-4 থেকে 5-8 কলাম থেকে সামগ্রী কলাম col-lg-push-4পরিবর্তন করে । একইভাবে, সাইডবার কলামটি 5-8 থেকে 1-4 পর্যন্ত 'টান' । col-lg-pull-4

— টি Nguyen

কর - $$ - অফসেট-এক্সএক্স-মার্জিন-বাম মানগুলি প্রয়োগ করে

— beauXjames

Answer 3

ভুল ধারণাটি কলাম ক্রম সহ সাধারণ ভুল ধারণাটি হ'ল, আমার মোবাইল ডিভাইসগুলিতে পুশিং এবং টান করা উচিত (বা পারে) এবং ডেস্কটপ ভিউগুলি মার্কআপের প্রাকৃতিক ক্রমে রেন্ডার করা উচিত। এটা ভুল.

রিয়েলিটি বুটস্ট্র্যাপ একটি মোবাইল প্রথম কাঠামো। এর অর্থ হ'ল আপনার এইচটিএমএল মার্কআপে থাকা কলামগুলির ক্রমটি যাতে আপনার মোবাইল ডিভাইসে প্রদর্শিত হতে চান সেটিকে উপস্থাপন করা উচিত। এর অর্থ এই যে ধাক্কা দেওয়া এবং টানানো বড় ডেস্কটপ দর্শনে করা হয়। মোবাইল ডিভাইসে দেখুন না ..

ব্র্যান্ডন শামালজ - সম্পূর্ণ স্ট্যাক ওয়েব বিকাশকারী এখানে পুরো বিবরণ দেখুন

Answer 4

আমি কেবল অনুভব করেছি যে আমি এই 2 টি ভাল উত্তরে আমার 0.2 ডলার যুক্ত করব। আমার একটি কেস হয়েছিল যখন আমাকে 3 কলামের পরিস্থিতিতে শেষ কলামটি শীর্ষে নিয়ে যেতে হয়েছিল।

[এক] [b] [সি]

প্রতি

[সি]

[এক]

[বি]

বুস্ট্র্যাপের ক্লাসটি .col-xx-push-Xঅন্য কিছুই করে না তবে ডানদিকে একটি কলামকে ঠেলে দেয় left: XX%; তাই ডানদিকে একটি কলামকে চাপতে আপনাকে যা করতে হবে তা হল সিউডো কলামগুলির বামে সংখ্যার যোগ করা।

এক্ষেত্রে:

• দুটি কলাম ( col-md-5এবং col-md-3) বাম দিকে চলেছে, যার প্রতিটি ডান দিকে যাচ্ছে তার মান সহ;

• col-md-4প্রথম দুটি বামে যোগফল (5 + 3 = 8) দ্বারা এক ( ) ডানদিকে যাচ্ছে;

---

<div class="row">
    <div class="col-md-4 col-md-push-8 ">
        C
    </div>
    <div class="col-md-5 col-md-pull-4">
        A
    </div>
    <div class="col-md-3 col-md-pull-4">
        B
    </div>
</div>

Answer 5

ভিউপোর্টের আকারের উপর নির্ভর করে আপনার যদি 1/2/4 কলামে ডেটা সংগঠিত করতে হয় তবে ধাক্কা দেওয়া এবং টানানো কোনও বিকল্প নয়। আপনি প্রথমে আপনার আইটেমগুলি কীভাবে অর্ডার করুন তা নয়, মাপের একটি আপনাকে ভুল অর্ডার দিতে পারে।

এই ক্ষেত্রে একটি সমাধান হল কোনও ধাক্কা বা ক্লাশ ক্লাশ ছাড়াই নেস্টেড সারি এবং কলস ব্যবহার করা s

উদাহরণ

এক্সএসে আপনি চান ...

A
B
C
D
E
F
G
H

এস এম তে আপনি চান ...

A   E
B   F
C   G
D   H

এমডি এবং উপরে আপনি চান ...

A   C   E   G
B   D   F   H

সমাধান

আশেপাশের দুই-কলামের প্যারেন্ট এলিমেন্টে নেস্টেড দ্বি-কলামের শিশু উপাদানগুলি ব্যবহার করুন:

এখানে একটি কাজের স্নিপেট রয়েছে:

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript" ></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-sm-6">
    <div class="row">
      <div class="col-md-6"><p>A</p><p>B</p></div>
      <div class="col-md-6"><p>C</p><p>D</p></div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="row">
      <div class="col-md-6"><p>E</p><p>F</p></div>
      <div class="col-md-6"><p>G</p><p>H</p></div>
    </div>
  </div>
</div>

এই সমাধানটির আর একটি সৌন্দর্য হ'ল, আইটেমগুলি তাদের প্রাকৃতিক ক্রমে (এ, বি, সি, ... এইচ) কোডে উপস্থিত হয় এবং এটিকে বদলাতে হবে না, যা সিএমএস প্রজন্মের জন্য দুর্দান্ত।