左右移除Bootstrap WELL填充

时间:2017-06-06 10:04:17

标签: css twitter-bootstrap

有没有可能让Bootstrap很好地靠近在一起?

我已经尝试 import { Component } from '@angular/core'; import { NavController, NavParams } from 'ionic-angular'; @Component({ selector: 'page-page2', templateUrl: 'page2.html' }) export class Page2 { items:any; constructor(private navCtrl: NavController) { this.items = [ {voornaam: 'Mert', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 1', rank: 'teacher'}, {voornaam: 'Ask Sana', achternaam: 'Benzer', avatar: 'http://placehold.it/100', groep: 'Groep 1', rank: 'teacher'}, {voornaam: 'Koray', achternaam: 'Avci', avatar: 'http://placehold.it/100', groep: 'Groep 1', rank: 'leerling'}, {voornaam: 'Recep', achternaam: 'Ivedik', avatar: 'http://placehold.it/100', groep: 'Groep 3', rank: 'leerling'}, {voornaam: 'Gel', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 2', rank: 'leerling'}, {voornaam: 'Yarim', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 3', rank: 'leerling'}, {voornaam: 'Gonlume', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 3', rank: 'leerling'}, {voornaam: 'Huzur', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 2', rank: 'leerling'}, {voornaam: 'Ver', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 2', rank: 'leerling'}, {voornaam: 'Omrume', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 2', rank: 'leerling'} ]; let newData = { leerling: [], teacher: [] } for (var i = 0; i < this.items.length; i++) { var element = this.items[i]; newData[element.rank].push(element); } } } 但仍然没有运气。

我想做什么: enter image description here 我的代码:

clearfix

任何帮助将不胜感激!

2 个答案:

答案 0 :(得分:2)

<div class="container">
    <div class="row">
        <div class="col-md-4 well">
                <p>Write Something Here</p>
        </div>

        <div class="col-md-4 well">
                <p>Write Something Here</p>
        </div>

        <div class="col-md-4 well">
                <p>Write Something Here</p>
        </div>
    </div>
</div>

答案 1 :(得分:0)

在这里,你可以改变左侧和右侧的2px。是否有权在他们之间找到理想的差距!

<style>
  .wellcontainer .col-md-4{
  padding-left:2px;
  padding-right:2px;
}
</style>
<div class="container wellcontainer">
    <div class="row">
        <div class="col-md-4">
            <div class="well">
                <p>Write Something Here</p>
            </div>
        </div>

        <div class="col-md-4">
            <div class="well">
                <p>Write Something Here</p>
            </div>
        </div>

        <div class="col-md-4">
            <div class="well">
                <p>Write Something Here</p>
            </div>
        </div>
    </div>
</div>