Question

我尝试使用Bootstrap 3在默认的12列中添加10列而没有空格。但我不能。你能帮我吗？如何在Bootstrap 3中添加10个相等的列？而且它应该是没有空格的全宽。

<div class="container">
<div class="row">
    <div class="col-md-1"><img src="img/1.jpg"></div>
    <div class="col-md-1"><img src="img/2.jpg"></div>
    <div class="col-md-1"><img src="img/2.jpg"></div>
    <div class="col-md-1"><img src="img/4.jpg"></div>
    <div class="col-md-1"><img src="img/5.jpg"></div>
    <div class="col-md-1"><img src="img/6.jpg"></div>
    <div class="col-md-1"><img src="img/7.jpg"></div>
    <div class="col-md-1"><img src="img/8.jpg"></div>
    <div class="col-md-1"><img src="img/9.jpg"></div>
    <div class="col-md-1"><img src="img/10.jpg"></div>
</div>

Answer 1

您可以在10个网格中自定义引导程序，

http://getbootstrap.com/customize/#grid-system

您可以更改 @ grid-columns 值 10

或

您可以添加自定义html＆amp;本节的css

Answer 2

          /*  SECTIONS  */
 .section {
 clear: both;
 padding: 0px;
 margin: 0px;
  }

         /*  COLUMN SETUP  */
.col {
display: block;
float:left;
margin: 1% 0 1% 0.5%;
 }
.col:first-child { margin-left: 0; }

       /*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
       /*  GRID OF TEN  */
  .span_10_of_10 {
width: 100%;
   }

  .span_9_of_10 {
     width: 89.95%;
     }

   .span_8_of_10 {
width: 79.9%;
  }

 .span_7_of_10 {
width: 69.85%;
        }

  .span_6_of_10 {
width: 59.8%;
  }

  .span_5_of_10 {
width: 49.75%;
 }

 .span_4_of_10 {
width: 39.7%;
 }

  .span_3_of_10 {
width: 29.65%; 
  }

    .span_2_of_10 {
width: 19.6%;
   }

  .span_1_of_10 {
width: 9.55%;
   }

   /*  GO FULL WIDTH BELOW 480 PIXELS */
  @media only screen and (max-width: 480px) {
     .col {  margin: 1% 0 1% 0%; }

        .span_1_of_10, .span_2_of_10, .span_3_of_10, .span_4_of_10,                                                                        
 .span_5_of_10, .span_6_of_10, .span_7_of_10, .span_8_of_10, .span_9_of_10,             
  .span_10_of_10 {
    width: 100%; 
     }
    }

  <div class="section group">
  <div class="col span_1_of_10">
    1 of 10
   </div>
<div class="col span_1_of_10">
1 of 10
</div>
<div class="col span_1_of_10">
1 of 10
</div>
<div class="col span_1_of_10">
1 of 10
</div>
<div class="col span_1_of_10">
1 of 10
</div>
<div class="col span_1_of_10">
1 of 10
</div>
<div class="col span_1_of_10">
1 of 10
</div>
<div class="col span_1_of_10">
1 of 10
</div>
<div class="col span_1_of_10">
1 of 10
</div>
<div class="col span_1_of_10">
1 of 10
</div>

如何在Bootstrap 3中添加10个相等的列

2 个答案: