كيفية إزالة المسافة بين اثنين div في أعمدة مختلفة في bootsrtap

لدي صف واحد واثنين من cols التي استخدمتها في مشروعي وقدمت لقطة شاشة للمشكلة أريد إزالة المسافة بين قسمين في الأعمدة ، الرجاء مساعدتي هنا هو رمز بلدي وأعطي لون مختلف للأعمدة التي استخدمتها وداخل القول اعتدت جيدا الآن أريد أن انضم إلى هذين الاثنين جيدا وإزالة أي الحشو أو الهامش أو المسافة بينهما كيف يمكنني تحقيق هذا

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container-fluid">
             <div class="row">
                <div class="col-md-3" style="background-color:green;">
          <div class="well well-lg" style="margin-top:10px;">
                          Admin Name
                                </div>
        
                        </div>

                <div class="col-md-9" style="background-color:red;">
                        <div class="well well-lg" style="margin-top:10px;">
                                        

Welcome to Admin Panle

                                        
                                </div>

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

هذه لقطة شاشة لمشروع mu

0

2 إجابة

يمكنك إضافة فئة جديدة إلى عناصر div وإزالة padding/margin باستخدام css. لجعلها أكثر وضوحا ، يعين bootstrap margin-left: -15px و margin-right: -15px لـ .row selector و padding-left: 15px و padding-right: 15px على جميع محددات .col - * للحصول على مسافة 30 بكسل بين جميع الأعمدة. لإزالة هذه المساحة ، يجب عليك تعيين تلك القيم للهوامش والمهام على صفر. هكذا كيف تقوم بها.

جرب هذا الكود.

<div class="container-fluid">
    <div class="row no-gutter">
        <div class="col-md-3" style="background-color:green;">
            <div class="well well-lg" style="margin-top:10px;">   Admin Name </div>
        </div>
        <div class="col-md-9" style="background-color:red;">
            <div class="well well-lg" style="margin-top:10px;">
                

Welcome to Admin Panle

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

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

.row.no-gutter > div[class*="col-"] {
padding-left: 0;
padding-right: 0;
}
0
وأضاف
Aryan Twanju بفضل ذلك يعمل يمكنك شرح ذلك بمزيد من التفاصيل من فضلك
وأضاف المؤلف Umar, مصدر
لقد أضفت التفاصيل الكاملة في جوابي. إلق نظرة.
وأضاف المؤلف Aryan Twanju, مصدر

أفضل طريقة لإزالة الحشو على الأعمدة هي إضافة فئة .no-pad إلى.

 <div class="row no-pad">
...and then add this CSS.

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

I suggest you to use Bootstrap 4, because Bootstrap 4 now includes a .no-gutters class that you can just add to the .row.

  <div class="row no-gutters">
      <div class="col">x</div>
      <div class="col">x</div>
      <div class="col">x</div>
  </div>

Bootstrap 4: http://www.codeply.com/go/OBW3RK1ErD

0
وأضاف