html w3schools আমি কিভাবে বুটস্ট্র্যাপ তরল বিন্যাসে গ্রিড উপাদান নিম্ন-সারিবদ্ধ করব




jquery (8)

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

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

-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/


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

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

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

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


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

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

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

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


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

!function ($) { //ensure $ always references jQuery
    $(function () { //when dom has finished loading
        //make top text appear aligned to bottom: http://.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);

একটি কাজ সমাধান জন্য http://jsfiddle.net/jhfrench/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())
});

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

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

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

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

আপনি flex ব্যবহার করতে পারেন:

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

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

এখানে এই কার্যকারিতা বাস্তবায়নের জন্য একটি angularjs নির্দেশিকা

    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);
        }
      };
    }




twitter-bootstrap