Question

也许这次我太严格了，但我想在BS 4按钮中完全对齐（垂直）一些字体真棒图标，这是我正在使用的代码：

new Vue({
    el: '#app',
    data: {
        items: [
            {
                id: 1,
                title: "Item 1",
                price: 50
            },
            {
                id: 2,
                title: "Item 2",
                price: 100
            },
            {
                id: 3,
                title: "Item 3",
                price: 50.5
            }
        ],
        cart: [],
        search: ''
    },
    methods: {
        total() {
            var t = 0;
            for(var i = 0; i < this.cart.length; i++) {
                var item = this.cart[i];
                t += item.price * item.qty;
            }

            return t;
        },
        addItem(index) {
            var item = this.items[index];
            var found = false;
            // if it's there, increment quantity:
            for(var i = 0; i < this.cart.length; i++) {
                let ic = this.cart[i];

                if(ic.id == item.id) {
                    ic.qty++;
                    found = true;
                    break;
                }
            }

            // if not, add it:
            if(!found) {
                this.cart.push({
                    title: item.title,
                    qty: 1,
                    id: item.id,
                    price: item.price
                });
            }
        },
        dec(item) {
            item.qty--;
            if(item.qty < 1) {
                item.qty = 1;

                // remove item from cart:
                for(var i = 0; i < this.cart.length; i++) {
                    if(this.cart[i].id == item.id) {
                        this.cart.splice(i, 1);
                        break;
                    }
                }
            }
        },
        inc(item) {
            // increment item on cart:
            item.qty++;
        },
        onSubmit() {
            console.log(this.search);
        }
    },
    filters: {
        currency(price) {
            return '$'.concat(price.toFixed(2));
        }
    }
});

body {
    background-color: #393C3D;
    color: #FFF;
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Vue.js Poster Shop</title>
    <link rel="icon" href="public/favicon.ico" type="image/x-icon">

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Luckiest+Guy" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Lato|Montserrat" rel="stylesheet">

    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style type="text/css">
        body {
            background-color: #393C3D;
            color: #FFF;
        }
    </style>
</head>
<body>
<div class="container-fluid" id="app">
    <div class="row">
        <div class="col-lg-4 col-xs-12">
            <div class="card card-inverse bg-inverse my-3">
                <div class="card-block">
                    <h1 class="card-title">
                        Vue.js Poster Store
                        <button class="btn btn-sm btn-danger" v-on:click="dec(item)">
                            <i class="fa fa-minus"></i>
                        </button>
                        <button class="btn btn-sm btn-success" v-on:click="inc(item)">
                            <i class="fa fa-plus"></i>
                        </button>
                    </h1>
                    <form v-on:submit.prevent="onSubmit()">
                        <div class="input-group">
                            <input type="text"   class="form-control" v-model="search" placeholder="Search for...">
                            <span class="input-group-btn">
                                <button class="btn btn-primary" type="submit">Go!</button>
                            </span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6 col-xs-12">
            <div class="row">
                <div class="col-lg-12">
                    <h3>Store</h3>
                </div>
            </div>
            <div v-for="(item, index) in items">
                <div class="card card-inverse bg-inverse my-3">
                    <div class="card-block">
                        <h3 class="card-title">{{item.title}}</h3>
                        <p class="card-text">Here goes the description</p>
                        <button class="btn btn-success" v-on:click="addItem(index)">Add to cart</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-5 col-lg-5-offset-1 col-xs-12">
            <div class="row">
                <div class="col-lg-4">
                    <h3>Cart</h3>
                </div>
                <div class="col-lg-8">
                    <h5 v-if="cart.length">Total: {{total() | currency}}</h5>
                </div>
            </div>
            <div v-for="item in cart">
                <div class="card card-inverse bg-inverse my-3">
                    <div class="card-block">
                        <h3 class="card-title">{{item.title}}</h3>

                        <p>Price: {{item.price | currency}} x {{item.qty}}</p>
                        
                        <button class="btn btn-sm btn-danger" v-on:click="dec(item)">
                            <i class="fa fa-minus"></i>
                        </button>
                        <button class="btn btn-sm btn-success" v-on:click="inc(item)">
                            <i class="fa fa-plus"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div>
                <div class="my-3" v-if="!cart.length">
                    No items in the cart
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.js"></script>
<script type="text/javascript" src="public/script.js"></script>

</body>
</html>

这就是结果：

enter image description here

并且，正如您所看到的，图标不是垂直对齐的： enter image description here

我只是想知道是否有一种简单的方法可以解决这个问题（也许我的代码中有错误？）

我试过this但是我无法使它工作（虽然这是为了div）。有什么想法吗？

提前致谢。

Answer 1

解决方案1，使用css创建自己的 - +按钮（完美按钮）

解决方案2，调整FA图标边距

这是解决方案1.

new Vue({
    el: '#app',
    data: {
        items: [
            {
                id: 1,
                title: "Item 1",
                price: 50
            },
            {
                id: 2,
                title: "Item 2",
                price: 100
            },
            {
                id: 3,
                title: "Item 3",
                price: 50.5
            }
        ],
        cart: [],
        search: ''
    },
    methods: {
        total() {
            var t = 0;
            for(var i = 0; i < this.cart.length; i++) {
                var item = this.cart[i];
                t += item.price * item.qty;
            }

            return t;
        },
        addItem(index) {
            var item = this.items[index];
            var found = false;
            // if it's there, increment quantity:
            for(var i = 0; i < this.cart.length; i++) {
                let ic = this.cart[i];

                if(ic.id == item.id) {
                    ic.qty++;
                    found = true;
                    break;
                }
            }

            // if not, add it:
            if(!found) {
                this.cart.push({
                    title: item.title,
                    qty: 1,
                    id: item.id,
                    price: item.price
                });
            }
        },
        dec(item) {
            item.qty--;
            if(item.qty < 1) {
                item.qty = 1;

                // remove item from cart:
                for(var i = 0; i < this.cart.length; i++) {
                    if(this.cart[i].id == item.id) {
                        this.cart.splice(i, 1);
                        break;
                    }
                }
            }
        },
        inc(item) {
            // increment item on cart:
            item.qty++;
        },
        onSubmit() {
            console.log(this.search);
        }
    },
    filters: {
        currency(price) {
            return '$'.concat(price.toFixed(2));
        }
    }
});

body {
    background-color: #393C3D;
    color: #FFF;
}

.vbtn {
  display: inline-block;
  font-size: 0px;
}

.btn-sm { height: 35px; }








/* btn plus */
.button_plus {
  position: absolute;
  width: 35px;
  height: 35px;
  background: #5cb85c;
  cursor: pointer;
  border-radius: 3px;
  /* Mittig */
  margin: -31px 0 0 45px;
}

.button_plus:after {
  content: '';
  position: absolute;
  transform: translate(-50%, -50%);
  height: 4px;
  width: 50%;
  background: white;
  top: 50%;
  left: 50%;
}

.button_plus:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  height: 50%;
  width: 4px;
}

.button_plus:hover:before,
.button_plus:hover:after {
  background: #fff;
  transition: 0.2s;
}

.button_plus:hover {
  background-color: #449d44;
  transition: 0.2s;
}



/* btn minus */
.button_minus {
  position: absolute;
  width: 35px;
  height: 35px;
  background: #d9534f;
  cursor: pointer;
  border-radius: 3px;
  margin-top: -31px;
}

.button_minus:after {
  content: '';
  position: absolute;
  transform: translate(-50%, -50%);
  height: 4px;
  width: 50%;
  background: white;
  top: 50%;
  left: 50%;
}

.button_minus:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  height: 50%;
}

.button_minus:hover:before,
.button_minus:hover:after {
  background: #fff;
  transition: 0.2s;
}

.button_minus:hover {
  background-color: #c9302c;
  transition: 0.2s;
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Vue.js Poster Shop</title>
    <link rel="icon" href="public/favicon.ico" type="image/x-icon">

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Luckiest+Guy" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Lato|Montserrat" rel="stylesheet">

    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style type="text/css">
        body {
            background-color: #393C3D;
            color: #FFF;
        }
    </style>
</head>
<body>
<div class="container-fluid" id="app">
    <div class="row">
        <div class="col-lg-4 col-xs-12">
            <div class="card card-inverse bg-inverse my-3">
                <div class="card-block">
                    <h1 class="card-title">
                        Vue.js Poster Store
                        <span class="vbtn" style="display: inline-block;">
                          <div class="button_plus"></div>
                          <div class="button_minus"></div>
                        </span>
                    </h1>
                    <form v-on:submit.prevent="onSubmit()">
                        <div class="input-group">
                            <input type="text"   class="form-control" v-model="search" placeholder="Search for...">
                            <span class="input-group-btn">
                                <button class="btn btn-primary" type="submit">Go!</button>
                            </span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6 col-xs-12">
            <div class="row">
                <div class="col-lg-12">
                    <h3>Store</h3>
                </div>
            </div>
            <div v-for="(item, index) in items">
                <div class="card card-inverse bg-inverse my-3">
                    <div class="card-block">
                        <h3 class="card-title">{{item.title}}</h3>
                        <p class="card-text">Here goes the description</p>
                        <button class="btn btn-success" v-on:click="addItem(index)">Add to cart</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-5 col-lg-5-offset-1 col-xs-12">
            <div class="row">
                <div class="col-lg-4">
                    <h3>Cart</h3>
                </div>
                <div class="col-lg-8">
                    <h5 v-if="cart.length">Total: {{total() | currency}}</h5>
                </div>
            </div>
            <div v-for="item in cart">
                <div class="card card-inverse bg-inverse my-3">
                    <div class="card-block">
                        <h3 class="card-title">{{item.title}}</h3>

                        <p>Price: {{item.price | currency}} x {{item.qty}}</p>
                        
                        <button class="btn btn-sm btn-danger" v-on:click="dec(item)">
                            <i class="fa fa-minus"></i>
                        </button>
                        <button class="btn btn-sm btn-success" v-on:click="inc(item)">
                            <i class="fa fa-plus"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div>
                <div class="my-3" v-if="!cart.length">
                    No items in the cart
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.js"></script>
<script type="text/javascript" src="public/script.js"></script>

</body>
</html>

这是解决方案2：

new Vue({
    el: '#app',
    data: {
        items: [
            {
                id: 1,
                title: "Item 1",
                price: 50
            },
            {
                id: 2,
                title: "Item 2",
                price: 100
            },
            {
                id: 3,
                title: "Item 3",
                price: 50.5
            }
        ],
        cart: [],
        search: ''
    },
    methods: {
        total() {
            var t = 0;
            for(var i = 0; i < this.cart.length; i++) {
                var item = this.cart[i];
                t += item.price * item.qty;
            }

            return t;
        },
        addItem(index) {
            var item = this.items[index];
            var found = false;
            // if it's there, increment quantity:
            for(var i = 0; i < this.cart.length; i++) {
                let ic = this.cart[i];

                if(ic.id == item.id) {
                    ic.qty++;
                    found = true;
                    break;
                }
            }

            // if not, add it:
            if(!found) {
                this.cart.push({
                    title: item.title,
                    qty: 1,
                    id: item.id,
                    price: item.price
                });
            }
        },
        dec(item) {
            item.qty--;
            if(item.qty < 1) {
                item.qty = 1;

                // remove item from cart:
                for(var i = 0; i < this.cart.length; i++) {
                    if(this.cart[i].id == item.id) {
                        this.cart.splice(i, 1);
                        break;
                    }
                }
            }
        },
        inc(item) {
            // increment item on cart:
            item.qty++;
        },
        onSubmit() {
            console.log(this.search);
        }
    },
    filters: {
        currency(price) {
            return '$'.concat(price.toFixed(2));
        }
    }
});

body {
    background-color: #393C3D;
    color: #FFF;
}

.fa-margin-top {
  margin-top: 4px;
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Vue.js Poster Shop</title>
    <link rel="icon" href="public/favicon.ico" type="image/x-icon">

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Luckiest+Guy" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Lato|Montserrat" rel="stylesheet">

    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style type="text/css">
        body {
            background-color: #393C3D;
            color: #FFF;
        }
    </style>
</head>
<body>
<div class="container-fluid" id="app">
    <div class="row">
        <div class="col-lg-4 col-xs-12">
            <div class="card card-inverse bg-inverse my-3">
                <div class="card-block">
                    <h1 class="card-title">
                        Vue.js Poster Store
                        <button class="btn btn-sm btn-danger" v-on:click="dec(item)">
                            <i class="fa fa-minus fa-margin-top"></i>
                        </button>
                        <button class="btn btn-sm btn-success" v-on:click="inc(item)">
                            <i class="fa fa-plus fa-margin-top"></i>
                        </button>
                    </h1>
                    <form v-on:submit.prevent="onSubmit()">
                        <div class="input-group">
                            <input type="text"   class="form-control" v-model="search" placeholder="Search for...">
                            <span class="input-group-btn">
                                <button class="btn btn-primary" type="submit">Go!</button>
                            </span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6 col-xs-12">
            <div class="row">
                <div class="col-lg-12">
                    <h3>Store</h3>
                </div>
            </div>
            <div v-for="(item, index) in items">
                <div class="card card-inverse bg-inverse my-3">
                    <div class="card-block">
                        <h3 class="card-title">{{item.title}}</h3>
                        <p class="card-text">Here goes the description</p>
                        <button class="btn btn-success" v-on:click="addItem(index)">Add to cart</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-5 col-lg-5-offset-1 col-xs-12">
            <div class="row">
                <div class="col-lg-4">
                    <h3>Cart</h3>
                </div>
                <div class="col-lg-8">
                    <h5 v-if="cart.length">Total: {{total() | currency}}</h5>
                </div>
            </div>
            <div v-for="item in cart">
                <div class="card card-inverse bg-inverse my-3">
                    <div class="card-block">
                        <h3 class="card-title">{{item.title}}</h3>

                        <p>Price: {{item.price | currency}} x {{item.qty}}</p>
                        
                        <button class="btn btn-sm btn-danger" v-on:click="dec(item)">
                            <i class="fa fa-minus"></i>
                        </button>
                        <button class="btn btn-sm btn-success" v-on:click="inc(item)">
                            <i class="fa fa-plus"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div>
                <div class="my-3" v-if="!cart.length">
                    No items in the cart
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.js"></script>
<script type="text/javascript" src="public/script.js"></script>

</body>
</html>

在Bootstrap 4按钮中对齐字体真棒图标

1 个答案: