বুটস্ট্র্যাপ 3-এ কলামগুলি থেকে প্যাডিং সরান

Question

সমস্যা:

বুটস্ট্র্যাপ 3-এ কল-এমডি- * এর ডান এবং বামে প্যাডিং / মার্জিন সরান।

এইচটিএমএল কোড:

<div class="col-md-12">
    <h2>OntoExplorer<span style="color:#b92429">.</span></h2>

    <div class="col-md-4">
        <div class="widget">
            <div class="widget-header">
                <h3>Dimensions</h3>
            </div>

            <div class="widget-content" id="">
                <div id='jqxWidget'>
                    <div style="clear:both;margin-bottom:20px;" id="listBoxA"></div>
                    <div style="clear:both;" id="listBoxB"></div>

                </div>
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <div class="widget">
            <div class="widget-header">
                <h3>Results</h3>
            </div>

            <div class="widget-content">
                <div id="map_canvas" style="height: 362px;"></div>
            </div>
        </div>
    </div>

</div>

পছন্দসই আউটপুট:

বর্তমানে এই কোডটি দুটি কলামের ডান এবং বামে প্যাডিং / মার্জিন যুক্ত করেছে। আমি ভাবছি যে এই অতিরিক্ত স্থানটি সরানোর জন্য আমি কী মিস করছি?

বিজ্ঞপ্তি:

যদি আমি "কল-এমডি -4" অপসারণ করি তবে উভয় কলাম 100% এ প্রসারিত হবে তবে আমি সেগুলি একে অপরের পাশে থাকতে চাই।

Comments

বুটস্ট্র্যাপ 4 ব্যবহারের জন্য pl-0 pr-0অর্থাত<div class="col-7 pl-0 pr-0">

— মুহাম্মদ শাহজাদ

এমনকি ছোট, px-0যা বাম এবং ডান উভয় অন্তর্ভুক্ত।

— থিওফিল

Answer 1

আপনি সাধারণত .rowদুটি কলাম জড়ানোর জন্য ব্যবহার করেন , এটি নয় .col-md-12- এটি একটি কলাম অন্য কলামকে আবদ্ধ করে। সামগ্রিকভাবে, .rowঅতিরিক্ত মার্জিন এবং প্যাডিং নেই যা একটি col-md-12আনতে পারে এবং স্থানটি ছাড় দেয় যা কলামটি নেতিবাচক বাম এবং ডান মার্জিনের সাথে প্রবর্তন করবে।

<div class="container">
    <div class="row">
        <h2>OntoExplorer<span style="color:#b92429">.</span></h2>

        <div class="col-md-4 nopadding">
            <div class="widget">
                <div class="widget-header">
                    <h3>Dimensions</h3>
                </div>
                <div class="widget-content">
                </div>
            </div>
        </div>

        <div class="col-md-8 nopadding">
            <div class="widget">
                <div class="widget-header">
                    <h3>Results</h3>
                </div>
                <div class="widget-content">
                </div>
            </div>
        </div>
    </div>
</div>

আপনি যদি সত্যিই প্যাডিং / মার্জিনগুলি সরাতে চান তবে প্রতিটি সন্তানের কলামের জন্য মার্জিন / প্যাডিংগুলি ফিল্টার করার জন্য একটি ক্লাস যুক্ত করুন।

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

Comments

কনটেইনার ক্লাসে .ডাউড-প্যাডিং যুক্ত করা কি প্রয়োজনীয়? আমি বলব আপনার সিএসএস কোড সহ .col-md-8 ডিভের জন্য নোপ্যাড যুক্ত করা যথেষ্ট sufficient

— চার্লস ইংলস

আমি সাধারণত আমার কাস্টম সিএসএসে 3 টি অতিরিক্ত ক্লাস তৈরি করি .padding-0যা বাম এবং ডান প্যাডিং সেট করে (কেবল) 0; .padding-smযা প্যাডিংকে 2px এ .padding-mdসেট করে এবং এটি প্যাডিংকে 5px এ সেট করে। সাধারণ প্যাডিং 15px (কাস্টমাইজড না হলে), তাই এই অতিরিক্ত ক্লাসগুলি পর্যাপ্ত।

— মাইকেল জেইটেলর

উপায় দ্বারা .আরো সরানো হয়েছে এটি নতুন লাইন

— ওজনমুয়েজ

সাধারণ প্যাডিংটি ভেরিয়েবলগুলিতে কাস্টমাইজ করা হয় less বিহীন @ গ্রিড-গটার-প্রস্থ: 30px;

— ভ্লাদিস্লাভ লেজনেভ

প্যাডিং অপসারণ বা শ্রেণি তৈরির কোনও পূর্বনির্ধারিত বুটস্ট্র্যাপ কি কেবল সমাধান

— গৌরব আগরওয়াল

Answer 2

বুটস্ট্র্যাপ 4 .no-guttersক্লাস যুক্ত করেছে ।

বুটস্ট্র্যাপ 3 : আমি সবসময় এই শৈলীটি আমার বুটস্ট্র্যাপ কম / SASS এ যুক্ত করি:

.row-no-padding {
  [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

তারপরে এইচটিএমএলে আপনি লিখতে পারেন:

<div class="row row-no-padding">

আপনি যদি কেবলমাত্র শিশু কলামগুলি লক্ষ্য করতে চান তবে আপনি শিশু নির্বাচনকারী (ধন্যবাদ জন উ) ব্যবহার করতে পারেন।

.row-no-padding > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

আপনি কেবলমাত্র নির্দিষ্ট ডিভাইসের আকারের জন্য SAAD (মুডিং) সরাতে পারেন (SASS উদাহরণ):

/* Small devices (tablets, 768px and up) */
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
  .row-sm-no-padding {
    [class*="col-"] {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }
}

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

Comments

এটি নেস্টিং (যা এসএএসএস-এও রয়েছে) বাদে সরল সিএসএস, সুতরাং এটি একই কাজ করা উচিত।

— মার্চাইনওয়ার্ড

আমি পারফরম্যান্স উন্নত করতে সরাসরি শিশু নির্বাচনকারী ব্যবহার করার পরামর্শ দিই। & >[class*="col-"]পরিবর্তে ব্যবহার করুন।

— জন উ

@ জনউউ যা নীড়যুক্ত সারিগুলিকে স্টাইলটি উত্তরাধিকারী হতে বাধা দেয়, যা আমাকে খানিকটা ঝামেলার কারণ করেছিল। ধন্যবাদ!

— ট্রয় কার্লসন

[class^="col-"], [class*=" col-"] {...}পরিবর্তে আপনার ব্যবহার করা উচিত যাতে আপনি দুর্ঘটনাক্রমে foocol-উদাহরণস্বরূপ শ্রেণিকৃতদের লক্ষ্যবস্তু না করে । এটি শুরুর দিকে সেই শ্রেণীর নাম রয়েছে বা এটি একটি দ্বিতীয় শ্রেণীর নামের অংশ হিসাবে স্ট্রিংটি খুঁজে পাওয়া যায় সেখানে লক্ষ্য ছাড়াই এটির প্রাথমিক শ্রেণীর নাম রয়েছে বা এটি একটি মাধ্যমিক শ্রেণি হিসাবে থাকবে target

— ব্রেট

পবিত্র Smokes! আমি যে আইওএস ভিউপোর্ট বগ হিসাবে ভেবেছিলাম তার সাথে লড়াই করার জন্য আমি কয়েক ঘন্টা ব্যয় করেছি কারণ আমার আইফোন 6 কখনও কখনও (তবে অবিচ্ছিন্নভাবে) আমার ওয়েবপৃষ্ঠায় অটোজুম করে। কল প্যাডিং অপসারণের পরে, আমি মনে করি অটোজুম সঠিকভাবে কাজ করে! ধন্যবাদ!

— রায়ান

Answer 3

কলামগুলিতে কেবল প্যাডিং হ্রাস করা কৌশলটি তৈরি করবে না, কারণ আপনি পৃষ্ঠাটির প্রস্থকে প্রসারিত করবেন, এটি আপনার পৃষ্ঠাটির বাকী অংশের সাথে অসম করে তুলবে, নভবার বলুন। আপনার সারিতে নেতিবাচক মার্জিন সমানভাবে হ্রাস করতে হবে। @ স্মার্টওয়ার্ডের 'কম উদাহরণ গ্রহণ করা:

.row-no-padding {
  margin-left: 0;
  margin-right: 0;
  [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

Comments

আপনার সারিটি ধারক বা অন্য কলামে না থাকলে এটি কেবল তখনই সমস্যা। নেতিবাচক মার্জিনগুলি কেবলমাত্র সেই উপাদানগুলি থেকে প্যাডিং অফসেট করে

— ফ্রেড স্টার্ক

!importantএই কাজটি করার জন্য আমার উভয় মার্জিনের প্রয়োজন ছিল

— ফিলিপ বিজকার

Answer 4

বিশেষত SASS মিক্সিনের জন্য:

@mixin no-padding($side) {
    @if $side == 'all' {
        .no-padding {
            padding: 0 !important;
        }
    } @else {
        .no-padding-#{$side} {
            padding-#{$side}: 0 !important;
        }
    }
}

@include no-padding("left");
@include no-padding("right");
@include no-padding("top");
@include no-padding("bottom");
@include no-padding("all");

তারপরে এইচটিএমএলে, আপনি ব্যবহার করতে পারেন

.no-padding-left
.no-padding-right
.no-padding-bottom
.no-padding-top
.no-padding - to remove padding from all sides

অবশ্যই, আপনি কেবলমাত্র সেই ঘোষণাগুলিই অন্তর্ভুক্ত করতে পারেন, যা আপনার প্রয়োজন।

Comments

আমি এই পরিস্থিতিতে এই মিশিনটি (তার জন্য ধন্যবাদ) ব্যবহার করার চেষ্টা করছি এবং প্যাডিং কাজ করছে না। .banners-home { @include make-row(); .banner-comprar,.banner-pq{ @include no-padding("all"); @include make-xs-column(6); @include make-sm-column(6); @include make-md-column(6); @include make-lg-column(6); } .banner-simulador{ @include no-padding("all"); @include make-xs-column(12); @include make-sm-column(12); @include make-md-column(12); @include make-lg-column(12); } }

— jpcmf80

আমি কি ভুল হয়েছে তা বুঝতে। এই সমাধানটির কাজ করার জন্য আমার আর একটি মিশ্রিন তৈরি করা দরকার।

— বিটিডব্লিউ, এসএএসএস মিক্সিনের

আমি এটি কেবল @mixin nopadding{ padding:0!important; }আমার মধ্যে তৈরি করি _mixin.scss এবং তারপরে @include nopadding;উপরের কোডটিতে যুক্ত করব। :)

— jpcmf80

Answer 5

পরের দিনটি কেবল বুটস্ট্র্যাপ 4 এ উপলব্ধ

<div class="p-0 m-0">
</div>

দ্রষ্টব্য: .p-0 এবং .m-0 ইতিমধ্যে জুড়েছে বুটস্ট্র্যাপ.এসএস

Answer 6

কেবল "নো-প্যাডিং" যুক্ত করুন যা বুটস্ট্র্যাপ 3-এ অন্তর্নির্মিত শ্রেণি

Comments

একটি কলামে যুক্ত করার পরে আমার জন্য কাজ করে। একাধিক প্যাডিং এড়াতে নেস্টেড কলামগুলি ব্যবহার করার সময় এটি ব্যবহার করা উচিত।

— নিকোলাস বার্নিয়ার

এছাড়াও, একজন no-gutterপ্যারেন্টে ক্লাস যুক্ত করতে পারেন .row।

— আর্টবিআইটি

@ আর্টবিট আমার মনে হয় আপনার v4-alpha.getbootstrap.com/layout/grid/#no-guttersno-gutters অনুযায়ী কোড করা দরকার । এটা অন্তর্নির্মিত না।

— কল্টর

Answer 7

বুটস্ট্র্যাপ 4 এর একটি নেটিভ ক্লাস রয়েছে: .no-guttersপ্যারেন্টে ক্লাস যুক্ত করুন.row

Answer 8

আর একটি সমাধান, কেবলমাত্র যদি আপনি এর কম উত্স থেকে বুটস্ট্র্যাপটি সংকলন করেন তবে সম্ভব হয়, ভেরিয়েবলটিকে নতুন করে সংজ্ঞায়িত করা হয় যা কলামগুলির জন্য প্যাডিং সেট করে।

আপনি variables.lessফাইলটিতে ভেরিয়েবলটি খুঁজে পাবেন : একে বলা হয় @grid-gutter-width।

এটি উত্সগুলিতে এরূপ বর্ণিত হয়েছে:

//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width:         30px;

এটি 0 তে সেট করুন, সংকলন করুন bootstrap.lessএবং ফলাফলটি অন্তর্ভুক্ত করুন bootstrap.css। তুমি পেরেছ. আপনি যদি আমার মতো বুটস্ট্র্যাপ উত্স ইতিমধ্যে ব্যবহার করেন তবে এটি কোনও অতিরিক্ত নিয়ম সংজ্ঞায়নের বিকল্প হতে পারে।

Answer 9

সংস্করণ ৩.৪.০ থেকে বুটস্ট্র্যাপ ৩- এর প্যাডিং সরানোর একটি সরকারী পদ্ধতি রয়েছে: বর্গrow-no-gutters ।

ডকুমেন্টেশন থেকে উদাহরণ :

<div class="row row-no-gutters">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Answer 10

বুটস্ট্র্যাপ 4 এর ক্লাসে নেই। নিকাশী যা আপনি সারি উপাদানটিতে যোগ করতে পারেন।

<div class="container-fluid">
    <div class="row no-gutters">
        <div class="col-md-12">
            [YOUR CONTENT HERE]
        </div>
    </div>
</div>

তথ্যসূত্র: http://getbootstrap.com/docs/4.0/layout/grid/#grid-options

Answer 11

[class*="col-"]
  padding: 0
  margin: 0

Answer 12

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

@media (max-width: @screen-sm) {
    [class*="col-"] {
      padding-left: 0;
      padding-right: 0;
    }
    .row {
      margin-left: 0;
      margin-right: 0;
    }
    .container-fluid {
      margin: 0;
      padding: 0;
    }
}

Answer 13

বুটস্ট্র্যাপ ৩.7..7 বা তার চেয়ে কম ব্যবহার করে বি / ডাব্লু কলামগুলি থেকে ব্যবধান সরিয়ে ফেলুন।

.না-গটার একটি কাস্টম ক্লাস যা আপনি আপনার সারি ডিআইভিগুলিতে যুক্ত করতে পারেন

.no-gutter > [class*='col-'] {
        padding-right:0;
        padding-left:0;
    }

Comments

এটি কাজ করেছে এবং এর জন্য কম বা SASS প্রয়োজন নেই। আমি নোটিশ করেনি যে আমি আমার সারিতে ধারক বর্গ যোগ করার জন্য, কিন্তু, সেইসাথে এই অতিরিক্ত স্টাইলিং আবেদন ছিল: margin:0 auto;।

— ভলমাইক 17'19

দেবগণের সাথে এটি উপলব্ধি করতে হবে যে এটি করা হয়ে গেলে, তাদের নিজের জলের আকারগুলি তৈরি করতে তাদের কলামের ভিতরে একটি ডিআইভি তৈরি করতে হবে এবং মার্জিনটি প্রয়োগ করতে হবে।

— ভলমাইক 17'19

Answer 14

<div class="col-md-12">
<h2>OntoExplorer<span style="color:#b92429">.</span></h2>

<div class="col-md-4">
    <div class="widget row">
        <div class="widget-header">
            <h3>Dimensions</h3>
        </div>

        <div class="widget-content" id="">
            <div id='jqxWidget'>
                <div style="clear:both;margin-bottom:20px;" id="listBoxA"></div>
                <div style="clear:both;" id="listBoxB"></div>

            </div>
        </div>
    </div>
</div>

<div class="col-md-8">
    <div class="widget row">
        <div class="widget-header">
            <h3>Results</h3>
        </div>

        <div class="widget-content">
            <div id="map_canvas" style="height: 362px;"></div>
        </div>
    </div>
</div>

আপনি কল-এমডি -4 এর ভিতরে ডিভিতে একটি সারির ক্লাস যুক্ত করতে পারেন এবং সারি -15px মার্জিন কলামগুলি থেকে জলের ভারসাম্য বজায় রাখবে। বুটস্ট্র্যাপ 3-তে নর্দমার এবং সারি সম্পর্কে এখানে ভাল ব্যাখ্যা ।

Answer 15

আমার ধারণা এটি কেবল ব্যবহার করা সহজ

margin:-30px;

বুটস্ট্র্যাপ দ্বারা সেট করা মূল মানটিকে ওভাররাইড করতে।

আমি চেষ্টা করেছিলাম

margin: 0px -30px 0px -30px;

এবং এটা আমার জন্য কাজ করে।

Answer 16

আপনার কলামগুলিকে একটি .row এ মোড়ক করুন এবং সেই বিভাগে "No-gutter" নামক শ্রেণিতে যুক্ত করুন

<div class="container">
  <div class="row no-gutter">
    <h2>OntoExplorer<span style="color:#b92429">.</span></h2>

    <div class="col-md-4">
        <div class="widget">
            <div class="widget-header">
                <h3>Dimensions</h3>
            </div>
            <div class="widget-content">
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <div class="widget">
            <div class="widget-header">
                <h3>Results</h3>
            </div>
            <div class="widget-content">
            </div>
        </div>
    </div>
</div>

তারপরে আপনার সিএসএস ফাইলে সামগ্রীগুলির নীচে আটকান

.row.no-gutter {
  margin-left: 0;
  margin-right: 0;
}

.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
  padding-right: 0;
  padding-left: 0;
}

Answer 17

CSS রেফারেন্স সহ বুটস্ট্র্যাপ গটারটি সরিয়ে / কাস্টমাইজ করুন: http://arnique.net/web-design/58/a-quick-guide-to-changing-bootstraps-gutter-width/

/* remove */
.gutter-0.row {
  margin-right: -0px;
  margin-left: -0px;
}
.gutter-0 > [class^="col-"], .gutter-0 > [class^=" col-"] {
  padding-right: 0px;
  padding-left: 0px;
}

/* customize */
.gutter-6.row {
  margin-right: -3px;
  margin-left: -3px;
}
.gutter-6 > [class^="col-"], .gutter-6 > [class^=" col-"] {
  padding-right: 3px;
  padding-left: 3px;
}
    

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row gutter-6">
  <div class="col-sm-3 col-md-3">
    <div class="thumbnail">
      <img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>more</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-3 col-md-3">
    <div class="thumbnail">
      <img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>more</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-3 col-md-3">
    <div class="thumbnail">
      <img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>more</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-3 col-md-3">
    <div class="thumbnail">
      <img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>more</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

Answer 18

আপনি মার্জিন অপসারণের জন্য একটি নতুন শ্রেণি তৈরি করতে পারেন এবং যে উপাদানটিতে আপনি অতিরিক্ত মার্জিন সরাতে চান সেখানে প্রয়োগ করতে পারেন:

.margL0 { margin-left:0 !important }

গুরুত্বপূর্ণ : এটি আপনাকে ডিফল্ট মার্জিন অপসারণ করতে বা বর্তমান মার্জিন মানকে ওভাররাইট করতে সহায়তা করবে

এবং সেই ডিভের জন্য প্রয়োগ করুন যেখানে আপনি বাম দিক থেকে মার্জিনটি সরাতে চান

Answer 19

<style>
.col-md-12{
 padding-left:0px !important;
padding-right:0px !important;
}
.col-md-8{
padding-left:0px !important;
padding-right:0px !important;
}
.col-md-4{
padding-left:0px !important;
padding-right:0px !important;
}
</style>

Comments

আপনি দয়া করে আপনার উত্তর সহ একটি ব্যাখ্যা প্রদান করতে পারেন।

— পিকির্বি

<হেড> ট্যাগের আগে বা পরে এই কোডগুলি সরবরাহ করুন যাতে এটি সেই পৃষ্ঠাতে এই শ্রেণীর বৈশিষ্ট্যগুলিকে ওভাররাইড করে দেয়

— শ্রীলক্ষ্মী

Answer 20

আপনি আপনার কলামগুলির মার্জিন এবং প্যাডিংগুলি পরিচালনা করতে বুটস্ট্র্যাপ ব্যবহার করে কম মিক্সিন তৈরি করতে পারেন যেমন,

http://mohandere.work/less-mixins-for-margin-and-padding-with-bootstrap-3/

ব্যবহার:

xs-padding-lr-15px//left right both
xs-padding-l-15px 
xs-padding-r-15px

একইভাবে মার্জিন / প্যাডিং শূন্য সেট করতে আপনি ব্যবহার করতে পারেন,

xs-padding-lr-0px
xs-padding-l-0px
xs-padding-r-0px

Comments

দেখে মনে হচ্ছে প্রবন্ধ সম্পর্কিত তথ্যগুলি তখন লিঙ্কিত পৃষ্ঠায় রয়েছে। এটি এসওয়ের উপায় নয়। আপনার উত্তরে প্রয়োজনীয় তথ্য দিন!

— জোগো

বা লোকেরা কেবল 159 টি upvotes এবং কোনও ডাউনভোটস সহ গ্রহণযোগ্য উত্তরটি ব্যবহার করতে পারে, এটি এখানে দুই বছর ধরে রয়েছে। অথবা দশটিরও বেশি উত্স সহ আরও কয়েকটি উত্তরের একটি। সেই প্রতিযোগিতার বিরুদ্ধে এই পৃষ্ঠায় জায়গা অর্জন করতে আপনাকে আরও চেষ্টা করতে হবে।

— টম জিচ

Answer 21

ভিটালিয়া সিলিনের উত্তরে বিল্ডিং । আমরা কেবল প্যাডিং চাই না এমন ক্ষেত্রে কেবল আচ্ছাদন করা নয়, তবে আমাদের ক্ষেত্রে স্ট্যান্ডার্ড আকারের প্যাডিং রয়েছে।

Sassmeister.com- এ এই কোডটির লাইভ রূপান্তর দেখুন CSS

@mixin padding($side, $size) {
    $padding-size : 0;
    @if $size == 'xs' { $padding-size : 5px; }
    @else if $size == 's' { $padding-size : 10px; }
    @else if $size == 'm' { $padding-size : 15px; }
    @else if $size == 'l' { $padding-size : 20px; }

    @if $side == 'all' {
        .padding--#{$size} {
            padding: $padding-size !important;
        }
    } @else {
        .padding-#{$side}--#{$size} {
            padding-#{$side}: $padding-size !important;
        }
    }
}

$sides-list: all top right bottom left;
$sizes-list: none xs s m l;
@each $current-side in $sides-list {
  @each $current-size in $sizes-list {
    @include padding($current-side,$current-size);
  }
}

এটি তখন ফলাফল:

.padding--none {
  padding: 0 !important;
}

.padding--xs {
  padding: 5px !important;
}

.padding--s {
  padding: 10px !important;
}

.padding--m {
  padding: 15px !important;
}

.padding--l {
  padding: 20px !important;
}

.padding-top--none {
  padding-top: 0 !important;
}

.padding-top--xs {
  padding-top: 5px !important;
}

.padding-top--s {
  padding-top: 10px !important;
}

.padding-top--m {
  padding-top: 15px !important;
}

.padding-top--l {
  padding-top: 20px !important;
}

.padding-right--none {
  padding-right: 0 !important;
}

.padding-right--xs {
  padding-right: 5px !important;
}

.padding-right--s {
  padding-right: 10px !important;
}

.padding-right--m {
  padding-right: 15px !important;
}

.padding-right--l {
  padding-right: 20px !important;
}

.padding-bottom--none {
  padding-bottom: 0 !important;
}

.padding-bottom--xs {
  padding-bottom: 5px !important;
}

.padding-bottom--s {
  padding-bottom: 10px !important;
}

.padding-bottom--m {
  padding-bottom: 15px !important;
}

.padding-bottom--l {
  padding-bottom: 20px !important;
}

.padding-left--none {
  padding-left: 0 !important;
}

.padding-left--xs {
  padding-left: 5px !important;
}

.padding-left--s {
  padding-left: 10px !important;
}

.padding-left--m {
  padding-left: 15px !important;
}

.padding-left--l {
  padding-left: 20px !important;
}

Answer 22

কখনও কখনও আপনি কলামগুলির জন্য যে প্যাডিংটি চান তা হারাতে পারেন। তারা একে অপরের সাথে লেগে থাকা শেষ। এটি রোধ করতে, আপনি ক্লাসটি নিম্নলিখিত হিসাবে আপডেট করতে পারেন:

<div class="col-md-3 NoPaddingForChildren">
        <div class="col-md-6">
                    <label>Id</label>
                    <input ng-model="ID" class="form-control">
        </div>
        <div class="col-md-6">
                    <label>Value</label>
                    <input ng-model="Val" class="form-control">
        </div>
</div>

এবং সম্পর্কিত বর্গ:

.NoPaddingForChildren > div:not(:first-child):not(:last-child) {
    padding-left: 0;
    padding-right: 0;
}

.NoPaddingForChildren > div:first-child {
    padding-left: 0;
}

.NoPaddingForChildren > div:last-child {    
    padding-right: 0;
}

Answer 23

আপনি যদি SASS ফাইলগুলির সাথে বুটস্ট্র্যাপ ডাউনলোড করেন তবে আপনি কলামগুলির মার্জিনের জন্য একটি সেটিং আছে এমন কনফিগারেশন ফাইলটি সম্পাদনা করতে সক্ষম হবেন এবং তারপরে এটি সংরক্ষণ করতে পারবেন, সেভাবে SASS কলামগুলির নতুন প্রস্থ গণনা করে

Answer 24

আপনি আপনার বুটস্ট্র্যাপ গ্রিড সিস্টেমটি কাস্টমাইজ করতে পারেন এবং আপনার কাস্টম প্রতিক্রিয়াশীল গ্রিডটি সংজ্ঞায়িত করতে পারেন।

থেকে নিম্নোক্ত নর্দমা প্রস্থ জন্য আপনার ডিফল্ট মান পরিবর্তন @grid-gutter-width = 30pxকরতে@grid-gutter-width = 0px

(নর্দমার প্রস্থ কলামগুলির মধ্যে প্যাড করছে It এটি বাম এবং ডানদিকে অর্ধেকে ভাগ হয়ে যায় gets)

Answer 25

আমি এখনও প্রতিটি পর্দার আকারের প্রতিটি প্যাডিংয়ের উপর নিয়ন্ত্রণ রাখতে পছন্দ করি যাতে এই সিএসএসটি আপনার ছেলের পক্ষে উপযোগী হতে পারে :)

.nopadding-lg {
    padding-left: 0!important;
    padding-right: 0!important;
}
.nopadding-left-lg {padding-left: 0!important;}
.nopadding-right-lg {padding-right: 0!important;}

@media (max-width: 576px) {
    .nopadding-xs {
        padding-left: 0!important;
        padding-right: 0!important;
    }
    .nopadding-left-xs {padding-left: 0!important;}
    .nopadding-right-xs {padding-right: 0!important;}
}

@media (max-width: 768px) {
    .nopadding-sm {
        padding-left: 0!important;
        padding-right: 0!important;
    }
    .nopadding-left-sm {padding-left: 0!important;}
    .nopadding-right-sm {padding-right: 0!important;}
}
@media (max-width: 992px) {
    .nopadding-md {
        padding-left: 0!important;
        padding-right: 0!important;
    }
    .nopadding-left-md {padding-left: 0!important;}
    .nopadding-right-md {padding-right: 0!important;}
}

Answer 26

আপনি কাঁটাচামচ ব্যবহার করতে পারেন

https://github.com/srghma/bootstrap-rubygem-without-gutter/commit/8e42c16dcc2f132af3489c2275dd7460b524d437

gem "bootstrap", github: "srghma/bootstrap-rubygem-without-gutter"