Question

我正在尝试在这些按钮之间添加空格而不更改行大小。当我在边距中添加空格时，它会打破行。我怎么能这样做？

样本： https://codepen.io/PapaDeBeau/pen/XVvmmj

<div class="container">
    <div class="row">
      <div class="col-4 giveButton"><span>$</span>25</div>  
      <div class="col-4 giveButton"><span>$</span>50</div>  
      <div class="col-4 giveButton"><span>$</span>100</div>
    </div>

    <div class="row">
      <div class="col-4 giveButton"><span>$</span>250</div>  
      <div class="col-4 giveButton"><span>$</span>500</div>  
      <div class="col-4 giveButton"><span>$</span>1,000</div>
    </div>

    <div class="row">
      <div class="col-12 giveButton"><span>$</span>5,000</div>  
      <div class="col-12 giveButton"><span>$</span>10,000</div>  
    </div>
</div>

Answer 1

可能没有将你的col变成按钮，但是在按钮内放置按钮。

<div class="col-4">
    <button class="giveButton btn btn-block"><span>$</span>25</button>
</div>

您必须稍微调整一下giveButton课程。

Answer 2

我在每列中添加了一个div .col-12的新<div class="col-4"> <div class="col-12 giveButton"> <span>$</span>50 </div> </div>，这对我有用：

let UserSchema = new Schema({
  title: { type: String, required: true },
  firstName: { type: String, required: true },
  lastName: { type: String, required: true },
  username: { type: String, required: true, unique: true },
  avatar: String,
  email: { type: String, required: true },
  dob: String,
  password: { type: String, required: true },
  createdAt: Date,
  accounts: [{ type: Schema.Types.ObjectId, ref: 'Account' }] // --> this is what I want to fill
});

let AccountSchema = new Schema({
  createdAt: Date,
  accountNumber: { type: Number, required: true },
  balance: Number,
  daysLeft: Number,
  nextMonthPayment: Number,
  paymentType: String,
  currentPlan: {
    name: { type: String, required: true },
    usage: {
      used: Number,
      left: Number,
      total: Number,
      meta: {
        trafficData: [{
          date: Date,
          amount: Number,
          download: Number,
          upload: Number
        }],
      }
    }
  },
  user: { type: Schema.Types.ObjectId, ref: 'User' }
});

User = mongoose.model('User', UserSchema);
Account = mongoose.model('Account', AccountSchema);
// end: SCHEMAS & MODELS

这是一个工作示例： https://codepen.io/xristoeftimov/pen/EoqKbj

Answer 3

它打破行的原因是因为您错误地使用了Bootstrap列类。那些应该被用作你内容的容器，即你不应该在你的列中添加任何自定义样式（你做过的那种），因为这会导致你现在遇到的问题。

要解决此问题，请将列内容包装在div中，然后在这些div上使用自定义类giveButton。这使您可以自由地应用任何您想要的样式，同时仍然让Bootstrap在间距和响应性等方面发挥作用。

为了使您的按钮跨越全宽，我将本机Bootstrap类w-100（宽度：100％）添加到div，并且还将Bootstrap类text-center添加到中心内容。完成！

现在，Bootstrap装订线自动创建整齐的间距，但您可以通过将Bootstrap间距类应用于列来进一步控制它。例如，值为0到5而不是px-*的{{1}}将控制水平填充，*将控制垂直填充。

这是工作代码：

py-*

Bootstrap在cols之间添加空格而不会破坏行

3 个答案: