বুটস্ট্র্যাপ - পর্দার আকার ছোট হলে প্যাডিং বা মার্জিন সরানো

Question 1

সম্পাদনা: সম্ভবত আমার জিজ্ঞাসা করা উচিত যে পর্দা 480px প্রস্থের নীচে নেমে গেলে কোন নির্বাচক সাইড প্যাডিং সেট আপ করে? আমি এটি সনাক্ত করতে কিছুক্ষণের জন্য বুটস্ট্র্যাপ-প্রতিক্রিয়াশীলতা.এসএস ব্রাউজ করছি তবে কিছুই এটিকে প্রভাবিত করে না বলে মনে হচ্ছে।

মূল আমি মূলত ছোট ডিভাইস স্ক্রিনে প্রতিক্রিয়া জানাতে যে কোনও ডিফল্ট প্যাডিং বা মার্জিন সেট সরিয়ে নিতে চাই।

আমি একটি আছে background colorওভাররাইড container-fluidনির্বাচক এবং বড় পর্দার জন্য তারা প্রস্থ জুড়ে পুরোপুরি 100% রেন্ডার কিন্তু তারা পর্দা ছোট আকারের পর্যবসিত করা হয় ডিফল্টরূপে, বুটস্ট্র্যাপ উপর একটি মার্জিন বা প্যাডিং যোগ করার জন্য মনে হয় container-fluidবা container।

<div class="container-fluid">
    <div class="row-fluid">
      test
    </div>
</div>

আমি যদি বুটস্ট্র্যাপের ডিফল্ট শৈলীতে ওভাররাইট করতে কাস্টম সিএসএস ব্যবহার করি তবে ছোট পর্দায় এই প্যাডিং সরানোর জন্য আমার মিডিয়া কোয়েরি বা নির্বাচককে ওভাররাইট করা উচিত?

Question 2

বিশেষত 'ফোন' এর জন্য @ মিডিয়া ক্যোয়ারীটি হল ..

@media (max-width: 480px) { ... }

তবে, আপনি যে কোনও ছোট পর্দার আকারের জন্য প্যাডিং / মার্জিন অপসারণ করতে চাইতে পারেন। ডিফল্টরূপে, বুটস্ট্র্যাপ 978px এ শরীর, ধারক এবং নাবারগুলিতে মার্জিন / প্যাডিং সামঞ্জস্য করে।

এখানে আমার জন্য বেশিরভাগ ক্যোয়ারী কাজ করেছে (বেশিরভাগ ক্ষেত্রে):

@media (max-width: 978px) {
    .container {
      padding:0;
      margin:0;
    }

    body {
      padding:0;
    }

    .navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
      margin-left: 0;
      margin-right: 0;
      margin-bottom:0;
    }
}

ডেমো

বুটস্ট্র্যাপ 4 এর জন্য আপডেট

নতুন প্রতিক্রিয়াশীল ব্যবধানের ব্যবহারগুলি ব্যবহার করুন যা আপনাকে বিভিন্ন স্ক্রিনের প্রশস্ততা (ব্রেকপয়েন্টস) এর জন্য প্যাডিং / মার্জিন সেট করতে দেয়: https://stackoverflow.com/a/43208888/171456

Question 3

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

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

যৌক্তিকভাবে এটি দ্বারা যোগাযোগ করা উচিত

কখনও ব্যবহার না .containerসারি ছাড়া অন্য কোনও কিছুর জন্য ক্লাসটি
.containerশ্রেণীর এমন একটি ক্লোন তৈরি করুন যাতে গ্রিডবিহীন এইচটিএমএল ব্যবহারের জন্য কোনও প্যাডিং নেই
.containerমোবাইলে প্যাডিং অপসারণ করার জন্য আপনি এটি মিডিয়া প্রশ্নের সাথে ম্যানুয়ালি মুছে ফেলতে পারেন overflow-x: hidden;যা খুব নির্ভরযোগ্য নয় তবে বেশিরভাগ ক্ষেত্রেই কাজ করে।

আপনি যদি LESSশেষ ফলাফলটি ব্যবহার করেন তবে এটির মতো দেখতে পাবেন

@media (max-width: @screen-md-max) {
    .container{
        padding: 0;
        overflow-x: hidden;
    }
}

আপনি টার্গেট করতে চান আকারে মিডিয়া ক্যোয়ারী পরিবর্তন করুন।

চূড়ান্ত চিন্তাভাবনা, আমি Foundation Frameworkগ্রিডটিকে আরও উন্নততর উপায়ে হিসাবে ব্যবহার করার পরামর্শ দিচ্ছি

Question 4

এই থ্রেডটি আমার বিশেষ ক্ষেত্রে সমাধান অনুসন্ধানে সহায়ক ছিল (বুটস্ট্র্যাপ 3)

@media (max-width: 767px) {
  .container-fluid, .row {
    padding:0px;
  }
  .navbar-header {
    margin:0px;
  }
}

Question 5

এর মতো সমস্যাগুলি সমাধান করার জন্য আমি সিএসএস ব্যবহার করছি - আমার মনে হয় সবচেয়ে দ্রুত এবং সহজতম উপায় ... কেবল আপনার প্রয়োজন অনুসারে এটিকে সংশোধন করুন ...

@media only screen and (max-width: 480px) {
    #your_id {width:000px;height:000px;}
}
@media only screen and (min-width: 480px) and (max-width: 768px) {
    #your_id {width:000px;height:000px;}
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
    #your_id {width:000px;height:000px;}
}
@media only screen and (min-width: 959px) {
    #your_id {width:000px;height:000px;}
}

Question 6

ডিভাইসের 100% প্রস্থে যাওয়ার জন্য আমি যে উপাদানটি পেয়েছি তাতে নেতিবাচক বাম এবং ডান মার্জিন ব্যবহার করা হয়। শরীরে 24px এর প্যাডিং রয়েছে, তাই এটির জন্য আপনি নেতিবাচক মার্জিন ব্যবহার করতে পারেন:

element{
    margin-left:  -24px;
    margin-right: -24px;
    padding-left:  24px;
    padding-right:  24px;
}

Question 7

বুটস্ট্র্যাপ 4-এ, প্রাথমিক পাত্রে থাকা 15px মার্জিনটি সমস্ত সারি এবং কলামগুলিতে ক্যাসকেডগুলি নামায়। সুতরাং, এই জাতীয় কিছু আমার জন্য কাজ করে ...

@media (max-width: 576px) {
    .container-fluid {
        padding-left: 5px;
        padding-right: 5px;
    }

    .row {
        margin-left: -5px;
        margin-right: -5px;
    }
    .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
        padding-left: 5px;
        padding-right: 5px;
    }
    .row.no-gutters {
        margin-left: 0;
        margin-right: 0;
    }
}

Question 8

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

বুটস্ট্র্যাপ 3 এর জন্য: আমার জন্য উত্তর। কন্টেইনার-ফ্লুয়েড, .আরও বা পুনরায় সেট করার মার্জিনের জন্য সিএসএস পুনর্লিখনের ক্ষেত্রে ছিল না, আমি যে ধারাবাহিক প্যাটার্নটি বুঝতে পেরেছিলাম তা হ'ল লম্বা শব্দের দৈর্ঘ্য নকশাটি ফেলে দিয়েছিল এবং মার্জিন তৈরি করছিল ।

সমাধান পদক্ষেপগুলি:

আপনার পাতাকে অস্থায়ীভাবে এমন বিভাগগুলি মুছে ফেলা করুন যাতে ধারকগুলি থাকে এবং ছোট ব্রাউজারগুলিতে আপনার সাইটটি পরীক্ষা করে। এটি আপনার সমস্যার ধারক সনাক্ত করবে।
আপনার একটি ডিভি ফর্ম্যাটিং সমস্যা হতে পারে। যদি করেন তবে ঠিক করুন। সব কিছু ঠিকঠাক থাকলে:
আপনি মোড়ানো না এমন দীর্ঘ শব্দ ব্যবহার করেছেন কিনা তা সনাক্ত করুন। আপনি যদি শব্দটি পরিবর্তন করতে না পারেন (যেমন ট্যাগ লাইন বা স্লোগান ইত্যাদির জন্য)

সমাধান 1: ছোট পর্দার জন্য আপনার মিডিয়া ক্যোয়ারীতে ফন্টটি ছোট আকারে ফর্ম্যাট করুন (আমি সাধারণত @ মিডিয়া (সর্বাধিক প্রস্থ: 767px) যথেষ্ট বলে মনে করি)।

বা:

সমাধান 2:

@media (max-width: 767px){

h1, h2, h3 {word-wrap: break-word;}
}

Question 9

পলিয়াস মারিউইকাটাইটিসের সিএসএস আমার জেনেসিস থিমের জন্য দুর্দান্তভাবে কাজ করেছিল, আমি কীভাবে এটি আমার প্রয়োজনের জন্য আরও সংশোধন করেছি:

@media only screen and (max-width: 480px) {
.entry {
background-color: #fff;
margin-bottom: 0;
padding: 10px 8px;

}

Question 10

সহজ সমাধান হ'ল এরকম কিছু লেখা,

px-lg-1

এমবি-এলজি -5

এলজি যোগ করার মাধ্যমে ক্লাসটি কেবলমাত্র বড় স্ক্রিনে প্রয়োগ করা হবে

Question 11

.container-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-left:0px;
    padding-right:0px;
}

Question 12

বুটস্ট্র্যাপ 3/4 এর জন্য আমি কী করি He

ধারকের পরিবর্তে ধারক-তরল ব্যবহার করুন।

এটি আমার সিএসএসে যুক্ত করুন

@media (min-width: 1400px) {
    .container-fluid{
        max-width: 1400px;
    }   
}

এটি 1400px প্রস্থের স্ক্রিনের নীচে মার্জিনগুলি সরিয়ে দেয়

Question 13

আর একটি সিএসএস যা মার্জিন সমস্যা তৈরি করতে পারে তা হ'ল আপনার direction:someValue আপনার সিএসএসে রয়েছে, তাই এটি প্রাথমিকের সাথে সেট করে সরিয়ে দিন।

উদাহরণ স্বরূপ:

body {
     direction:rtl;
 }
@media (max-width: 480px) {
    body {
     direction:initial;
    }
}