1
也許我這次太嚴格了，但是我想完美對齊（垂直）BS 4按鈕中的一些字體真棒圖標，這是我正在使用的代碼：對齊Bootstrap 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>，這是結果：
，正如你可以看到，圖標s的不完全垂直對齊： enter image description here
，我只是想知道是否有解決這個問題（也許我有什麼錯我的代碼？）
我試圖this一個簡單的方法，但我做不到讓它工作（這是爲了divs）。有任何想法嗎？
在此先感謝。
嗨古斯塔沃， 您可以編輯您的文章，並添加控逆變+ M選項請內部的所有代碼，以便正確地檢查它 – 2017-03-31 16:02:34
我覺得簡單的方法來修復，即添加一個類到 – 2017-03-31 16:03:20
我看不到「編輯帖子」按鈕：O – Gustavo