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


89

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

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

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

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

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


4
আসলে প্যাডিং শরীরে যুক্ত হয়।
মিস্টার স্মিথ

উত্তর:


117

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

@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


4
হ্যাঁ! অবশেষে এই আচরণটি সেট করে। আপনি আমার সমস্যাটি পয়েন্টে চিহ্নিত করেছেন। অনেক ধন্যবাদ.
সিওং লি

এটি খুব দরকারী, এবং বুটস্ট্র্যাপের জন্য কাজ করছে .. ধন্যবাদ
ফয়সাল

খোলা নাবারের সর্বাধিক প্রস্থটি কীভাবে হয়?
ফয়সাল

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

20

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

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

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

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

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

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

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

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


এটি এখনও বুটস্ট্র্যাপ 4 এর জন্য কাজ করে, যদি কোনও কারণে আপনি px-sm-0কলামগুলিতে ব্যবহার করতে না চান ।
সেবাস্তিয়ান থমাস

8

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

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

7

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

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

4
দুঃখিত..এটি কেবল কোনও নির্বাচক যুক্ত করে এই বিষয়টির জন্য প্যাডিংটি ওভাররাইট করে না ...
সিওং লি

4
@ টাসোয়েভান আমি ভীত, আমি ইতিমধ্যে জানতাম যে 000px 0 এর সমান ছিল এবং 000px 0 তে পরিবর্তন করা সমস্যার সমাধান করবে না, আমি জানি না যে পিক্সেলের মানকে 0 পর্যন্ত প্রস্থ নির্ধারণ করা কি ভাল ধারণা? আমার মনে হয় মার্জিন বা প্যাডিংয়ের সাথে এটি করার কিছু।
সিওং লি

4
"000" ঠিক উদাহরণ ছিল। আপনার # আপনার_আইডি {মার্জিন: 5px; প্যাডিং: 0 পিক্স; write পরিবর্তে # আপনার_আইডি {প্রস্থ: 000px; উচ্চতা: 000px;
write

4
সর্বদা সঠিক কোড লেখার চেষ্টা করুন! নতুনদের এটি বিভ্রান্তিকর মনে হতে পারে! :)
ম্যাকলিটো

3

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

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

2

বুটস্ট্র্যাপ 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;
    }
}

4
আন্ডাররেটেড উত্তর, এটি আমাকে মোবাইলে একটি অনুভূমিক স্ক্রোলবার থেকে মুক্তি পেতে সহায়তা করেছে
উইলিয়াম রান্ডোকন

1

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

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

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

  1. আপনার পাতাকে অস্থায়ীভাবে এমন বিভাগগুলি মুছে ফেলা করুন যাতে ধারকগুলি থাকে এবং ছোট ব্রাউজারগুলিতে আপনার সাইটটি পরীক্ষা করে। এটি আপনার সমস্যার ধারক সনাক্ত করবে।

  2. আপনার একটি ডিভি ফর্ম্যাটিং সমস্যা হতে পারে। যদি করেন তবে ঠিক করুন। সব কিছু ঠিকঠাক থাকলে:

  3. আপনি মোড়ানো না এমন দীর্ঘ শব্দ ব্যবহার করেছেন কিনা তা সনাক্ত করুন। আপনি যদি শব্দটি পরিবর্তন করতে না পারেন (যেমন ট্যাগ লাইন বা স্লোগান ইত্যাদির জন্য)

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

বা:

সমাধান 2:

@media (max-width: 767px){

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

1

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

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

}


1

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

px-lg-1

এমবি-এলজি -5

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



0

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

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

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

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

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


0

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

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

body {
     direction:rtl;
 }
@media (max-width: 480px) {
    body {
     direction:initial;
    }
}
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.