আমি কীভাবে বুটস্ট্র্যাপ তরল লেআউটে গ্রিড উপাদানগুলিকে নীচে-প্রান্তিককরণ করব

Question

টুইটারের বুটস্ট্র্যাপ ব্যবহার করে আমার কাছে একটি তরল বিন্যাস রয়েছে, যার সাথে আমার দুটি কলামযুক্ত একটি সারি রয়েছে। প্রথম কলামে প্রচুর সামগ্রী রয়েছে যা আমি স্প্যানটি স্বাভাবিকভাবে পূরণ করতে চাই। দ্বিতীয় কলামে ঠিক একটি বোতাম এবং কিছু পাঠ্য রয়েছে যা আমি প্রথম কলামে ঘরের তুলনায় নীচে সারিবদ্ধ করতে চাই।

আমার যা আছে তা এখানে:

-row-fluid-------------------------------------
+-span6----------+ +-span6----------+
|                | |short content   |
| content        | +----------------+
| that           | 
| is tall        |    
|                |
+----------------+
-----------------------------------------------

আমি যা চাই তা এখানে:

-row-fluid-------------------------------------
+-span6----------+
|                |
| content        |
| that           | 
| is tall        | +-span6----------+    
|                | |short content   |
+----------------+ +----------------+
-----------------------------------------------

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

একটি লেখনী হিসাবে এই বিন্যাস:

http://jsfiddle.net/ryansturmer/A7buv/3/

Comments

আপনি কি আপনার .রাইটস্প্যানে প্রায় 200px এর মার্জিন-টপ যোগ করতে পারবেন না?

— রিচলুইস

সিএসএসের শর্টকাট কেবল এই প্রশ্নের উত্তর দেয়: stackoverflow.com/a/14223553/259725

— অ্যাডাম

bootply.com/125740# (দুঃখিত, আমি এই লিঙ্কটি থেকে কোন প্রশ্নটির উত্তরের কোন উত্তরটি ভুলে গিয়েছি))

— টুলমেকারস্টেভ

Answer 1

দয়া করে নোট করুন: বুটস্ট্র্যাপ 4+ ব্যবহারকারীর জন্য, দয়া করে ক্রিস্টোফের সমাধানটি বিবেচনা করুন (বুটস্ট্র্যাপ 4 প্রবর্তিত ফ্লেক্সবক্স, যা আরও বেশি মার্জিত সিএসএস-সলিউশন সরবরাহ করে)। নিম্নলিখিত বুটস্ট্র্যাপের পূর্ববর্তী সংস্করণগুলির জন্য কাজ করবে ...

---

কার্যক্ষম সমাধানের জন্য http://jsfiddle.net/jhfunch/bAHfj/ দেখুন ।

//for each element that is classed as 'pull-down', set its margin-top to the difference between its own height and the height of its parent
$('.pull-down').each(function() {
  var $this = $(this);
  $this.css('margin-top', $this.parent().height() - $this.height())
});

প্লাস পাশ দিয়ে:

• চেতনায় বুটস্ট্র্যাপ বর্তমান সাহায্যকারী শ্রেণীর , আমি বর্গ নামে pull-down।
• "টেনে নামা" হচ্ছে এমন উপাদানগুলিকে কেবল শ্রেণিবদ্ধ করা দরকার, তাই ...
• ... এটি বিভিন্ন উপাদান ধরণের (ডিভ, স্প্যান, বিভাগ, পি, ইত্যাদি) জন্য পুনরায় ব্যবহারযোগ্য
• এটি মোটামুটিভাবে সমর্থিত (সমস্ত বড় ব্রাউজারগুলি মার্জিন-শীর্ষকে সমর্থন করে)

এখন খারাপ খবর:

• এটি jQuery প্রয়োজন
• এটি লিখিত, প্রতিক্রিয়াশীল নয় (দুঃখিত)

Comments

প্রতিক্রিয়াশীলতার জন্য, সম্ভবত উইন্ডোটি হুক? stackoverflow.com/a/2969091/244811

— স্কট ওয়েভার

সিএসএস সমাধান হতে পারে এমন কোনও কিছুর জন্য jQuery সমাধান ব্যবহার করবেন না। স্টাইলিংয়ের উদ্দেশ্যে ডোম কারসাজি এড়ানোর অনেক কারণ রয়েছে।

— আর্কোনিক

@ আর্চোনিক: কেবলমাত্র সিএসএস-এর সমাধান কী? আমি এটিকে জেএস-নির্ভর সমাধানের চেয়েও পছন্দ করব। কেবল ওপি-র শর্ত মনে রাখবেন: "এমন একটি সমাধান যেখানে আমাকে আমার ডিভের পরম উচ্চতা নির্দিষ্ট করতে হবে না

— সেটিকে

@ সিএফএক্স একটি সিএসএস পোস্ট করেছে এমন একমাত্র ঝাঁকুনির সাথে সমাধান যা সম্পূর্ণ উচ্চতার প্রয়োজন হয় না।

— আর্কোনিক

অন্যদিকে, আমার সমাধান নীচে সারিবদ্ধ পৃথক উপাদান (বুটস্ট্র্যাপ এর অনুরূপ আচরণ দান ব্যবহারকারী পারবেন .pull-leftএবং .pull-rightভাইবোন প্রভাবিত না করেই)। সিএসএস-সলিউশন দিয়ে কি তা করা যায়?

— জেরোমি ফ্রেঞ্চ

Answer 2

এটি বুটস্ট্র্যাপ 3 (যদিও পুরানো সংস্করণগুলির জন্য কাজ করা উচিত) এর জন্য আপডেট হওয়া সমাধান যা কেবল সিএসএস / কম ব্যবহার করে:

http://jsfiddle.net/silb3r/0srp42pb/11/

আপনি সারিটিতে ফন্ট-আকার 0 তে সেট করেছেন (অন্যথায় আপনি কলামগুলির মধ্যে একটি pesky স্থান দিয়ে শেষ করবেন), তারপরে কলামটি ভাসমান সরিয়ে ফেলবেন, প্রদর্শন inline-blockসেট করুন, তাদের ফন্টের আকারটি পুনরায় সেট করুন এবং তারপরেvertical-align সেট করা যাবে তোমার যা কিছু দরকার.

কোন jQuery প্রয়োজন।

Comments

আমি এটি মাঝখানে রাখতে চাই তবে আপনার jsfiddle এ যখন আমি "উল্লম্ব- allign: মাঝারি" চেষ্টা করেছি তখন এটি কার্যকর হয়নি। কোন চিন্তা?

— আনন্দ

উভয় সেট divকরতে চেষ্টা করুন vertical-align: middle;।

— সিএফএক্স

এটাই একমাত্র গ্রহণযোগ্য উত্তর! @ লুকাস এর কলামগুলিতে প্রস্থগুলিকে উপেক্ষা করবে যা কোনও সারি পূরণ করে না। স্টাইলিংয়ের জন্য এবং ডোম হেরফের ... এসএমএইচ।

— আর্কোনিক

আপনার সিএসএস সারি থেকে সরে দাঁড়িয়ে আছে (বিশেষত, .myrow) ... এর অর্থ এই নয় যে আপনি একটি কলাম শীর্ষ-প্রান্তিককরণ, একটি কলাম নীচে-প্রান্তিককরণ এবং তৃতীয় কলামটি শীর্ষ-প্রান্তিককরণ করতে পারবেন না?

— জেরোমি ফ্রেঞ্চ

ধন্যবাদ! বুটস্ট্র্যাপ 4 এর সাথে দুর্দান্ত কাজ করে

— এলি ট্যেসেডু

Answer 3

আপনি ফ্লেক্স ব্যবহার করতে পারেন:

@media (min-width: 768px) {
  .row-fluid {
    display: flex;
    align-items: flex-end;
  }
}

Comments

আমার মতে ফেলেক্স ব্যবহার করা খুব সুন্দর এবং সোজা and

— আলেসান্দ্রো ডেন্তেলা

ফ্লেক্স ব্যবহারের জন্য দুর্দান্ত পরামর্শ। বুটস্ট্র্যাপ সমস্যা সমাধানের জন্য সহজ, স্ট্রেইট-ফরোয়ার্ড এবং বুটস্ট্র্যাপ ব্যবহার করে।

— চেদারমোনকি

উজ্জ্বল উত্তর এবং কোনও জাভাস্ক্রিপ্ট / জ্যাকুইয়ের প্রয়োজন ছাড়াই বুটস্ট্র্যাপের সাথে পুরোপুরি কাজ করে।

— ফিল্ম

হ্যাঁ, এটি একটি নিয়মিত বুটস্ট্র্যাপ সারি এবং বামে যুক্ত করুন, এটি কাজ করে। সুন্দর। কীভাবে একটি প্রতিক্রিয়াহীন, jquery সমাধান শীর্ষ উত্তর হয়ে উঠেছে? আমরা কখনই জানতে পারব না।

— লেভি ফুলার

@ লেভিফুলার আমার ধারণা কারণ এই সমাধানটি কেবল একটি ব্রেকপয়েন্টকে সমর্থন করে

— ক্ল্যামচোদা

Answer 4

আপনাকে এর জন্য কিছু স্টাইল যুক্ত করতে হবে span6, স্মেথজি:

.row-fluid .span6 {
  display: table-cell;
  vertical-align: bottom;
  float: none;
}

এবং এটি আপনার মজাদার: http://jsfiddle.net/sgB3T/

Comments

আমি স্প্যান to এ সেট করার পরিবর্তে একটি নির্দিষ্ট সিএসএস ক্লাস তৈরি করব, তবে টেবিল-সেল কৌশলটি ভালভাবে কাজ করে! সঠিক প্রস্থের জন্য আমাকে "ডিসপ্লে: টেবিল-সারি" ধারণকারী ডিভিওতে সেট করতে হয়েছিল।

— মেটা-নাইট

বুটস্ট্র্যাপ 3-এর জন্য আমি এই নিয়মটি যুক্ত করেছি: .row.align-নীচে> [শ্রেণি ^ = কোল] {প্রদর্শন: টেবিল-ঘর; উল্লম্ব-সারিবদ্ধ: নীচে; ভাসা: কিছুই না; the সারিটিতে সারিবদ্ধ-নীচে প্রয়োগ করুন & lt; ডিভ শ্রেণি = "সারি সারিবদ্ধ-নীচে" & gt;

— মার্টিন

@ মার্টিন, আপনার বিধিটি ঠিক কাজ করে যখন আপনি .ালাইন-নীচে {প্রদর্শন: টেবিল-সারি; set সেট করেন তবে সারি সারিবদ্ধকরণ বন্ধ থাকে কারণ টেবিল সারিগুলি বুটস্ট্র্যাপ মার্জিন-বাম এবং মার্জিন-ডানকে সম্মান করে না: -15px ...... চিন্তা ভাবনা আছে?

— অ্যালেক্স হোয়াইট

@AlexWhite - রাখুন padding-left: 0এবং padding-right: 0যে সারিতে সব COLS উপর।

— অ্যানালগ শিয়া

এটি কলামের প্রশস্ততা উপেক্ষা করবে যখন কলামগুলি একটি সারির প্রস্থ পূরণ করবে না। উদাহরণস্বরূপ অফসেট ব্যবহার করার সময়।

— আর্কোনিক

Answer 5

এই কার্যকারিতা বাস্তবায়নের জন্য এখানে একটি কৌণিক নির্দেশও রয়েছে

    pullDown: function() {
      return {
        restrict: 'A',
        link: function ($scope, iElement, iAttrs) {
          var $parent = iElement.parent();
          var $parentHeight = $parent.height();
          var height = iElement.height();

          iElement.css('margin-top', $parentHeight - height);
        }
      };
    }

Answer 6

সবেমাত্র পিতামাতাকে display:flex;এবং সন্তানের সাথে সেট করুন margin-top:auto। এটি অভিভাবক উপাদানগুলির সন্তানের উপাদানের চেয়ে উচ্চতা বেশি বলে ধরে নিয়ে বাচ্চাদের সামগ্রীকে পিতামাতার উপাদানগুলির নীচে রাখবে।

margin-topযখন আপনার পিতা বা মাতা উপাদান বা আপনার পিতামাতার উপাদানগুলির মধ্যে আপনার সন্তানের আগ্রহের উপাদানটির চেয়ে বড় কোনও উপাদানটির উচ্চতা থাকে তখন তার জন্য মূল্য নির্ধারণ করার দরকার নেই ।

Comments

এটি গ্রহণযোগ্য উত্তর হওয়া উচিত: এটি সংক্ষিপ্ত, সহজ এবং কোনও ব্রাউজারে কাজ করে যা ফ্লেক্স সমর্থন করে। একমাত্র অপূর্ণতা এটি প্রতিক্রিয়াশীলতা বিরতি।

— tbm

Answer 7

এখানে অন্যান্য উত্তরের ভিত্তিতে একটি আরও প্রতিক্রিয়াশীল সংস্করণ। আইভান্সের <768px প্রশস্ত প্রশস্ত সমর্থন এবং ধীর উইন্ডোর আকারগুলি আরও ভালভাবে সমর্থন করার জন্য আমি ইভানের সংস্করণ থেকে পরিবর্তন করেছি।

!function ($) { //ensure $ always references jQuery
    $(function () { //when dom has finished loading
        //make top text appear aligned to bottom: http://stackoverflow.com/questions/13841387/how-do-i-bottom-align-grid-elements-in-bootstrap-fluid-layout
        function fixHeader() {
            //for each element that is classed as 'pull-down'
            //reset margin-top for all pull down items
            $('.pull-down').each(function () {
                $(this).css('margin-top', 0);
            });

            //set its margin-top to the difference between its own height and the height of its parent
            $('.pull-down').each(function () {
                if ($(window).innerWidth() >= 768) {
                    $(this).css('margin-top', $(this).parent().height() - $(this).height());
                }
            });
        }

        $(window).resize(function () {
            fixHeader();
        });

        fixHeader();
    });
}(window.jQuery);

Comments

এই পরিশোধনটির জন্য ধন্যবাদ, আমি এটি কেবল একটি বর্তমান প্রকল্পের জন্য নিয়েছি এবং এটি ভালভাবে কাজ করছে।

— সিফ্রিদি ২

কেন margin-top0 তে সেট করা হয়েছে, তারপরে আবার নতুন মানটিতে সেট করুন? এছাড়াও, কেন এই জিনিসগুলি দুটি each()"লুপ" এ করেন?

— জেরোমি ফ্রেঞ্চ

Answer 8

এটি সিএফএক্সের সমাধানের উপর ভিত্তি করে, তবে ডিসপ্লের কারণে যুক্ত আন্তঃ-কলাম স্থানগুলি সরিয়ে ফেলার জন্য পন্টেন্ট কন্টেইনারে ফন্টের আকারটি শূন্যে সেট করার পরিবর্তে: ইনলাইন-ব্লক এবং সেগুলি পুনরায় সেট করার জন্য, আমি কেবল যোগ করেছি

.row.row-align-bottom > div {
    float: none;
    display: inline-block;
    vertical-align: bottom;
    margin-right: -0.25em;
}

ক্ষতিপূরণ দিতে কলাম ডিভ্সে

Answer 9

আচ্ছা, আমি না সেই উত্তরের কোনো মত, একই সমস্যা আমার সমাধান এই যোগ করার জন্য ছিল: <div>&nbsp;</div>। সুতরাং আপনার স্কিমে এটি দেখতে (কমবেশি) এর মতো দেখাবে, আমার ক্ষেত্রে কোনও শৈলীর পরিবর্তন প্রয়োজন ছিল না:

-row-fluid-------------------------------------
+-span6----------+ +----span6----------+
|                | | +---div---+       |
| content        | | | & nbsp; |       |
| that           | | +---------+       |
| is tall        | | +-----div--------+|   
|                | | |short content   ||
|                | | +----------------+|
+----------------+ +-------------------+
-----------------------------------------------

Comments

 বাম ঘরের দৈর্ঘ্য অজানা থাকলে যোগ করার সংখ্যাটি কীভাবে আপনি জানেন ?

— Gqqnbig

Answer 10

.align-bottom {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

Comments

এটি কেন ওপি প্রশ্নের উত্তর দেয় তা ব্যাখ্যা করে আপনার উত্তরে কিছু তথ্য যুক্ত করার চেষ্টা করা উচিত

— এমএলভোই