将多个POST操作样式设置为引导按钮组

Question

我有多个"POST“按钮(带有单个提交按钮的空表单)来处理一些有副作用的操作。我需要使这些按钮以引导按钮组(.btn-group)的形式出现，就好像它们是应用了.btn类的a标记一样。

我的第一个想法是复制所有用于.btn-group的css样式，但是使用一个form子元素而不是.btn。嗯，事实证明，有很多的风格涉及！我希望还有别的解决办法。我包括了第一个基本样式，需要在代码片段中的一行中有按钮。需要更多的样式来管理边框、圆角等。

​

.btn-group.try1 > form {
  position: relative;
  float: left;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<h1>Doesn't work</h1>
<div class="btn-group">
<form method="post" action"./action1">
	<button type="submit" class="btn btn-danger">Action with side-effect 1</button>
</form>
<form method="post" action"./action2">
	<button type="submit" class="btn btn-default">Action with side-effect 2</button>
</form>
<form method="post" action"./action3">
	<button type="submit" class="btn btn-warning">Action with side-effect 3</button>
</form>
</div>

<h1>Desired appearance</h1>
<div class="btn-group">
	<a href="./action1" class="btn btn-danger">Action with side-effect 1</a>
	<a href="./action2" class="btn btn-default">Action with side-effect 2</a>
	<a href="./action3" class="btn btn-warning">Action with side-effect 3</a>
</div>

<h1>Attempt 1</h1>
<div class="btn-group try1">
<form method="post" action"./action1">
	<button type="submit" class="btn btn-danger">Action with side-effect 1</button>
</form>
<form method="post" action"./action2">
	<button type="submit" class="btn btn-default">Action with side-effect 2</button>
</form>
<form method="post" action"./action3">
	<button type="submit" class="btn btn-warning">Action with side-effect 3</button>
</form>
</div>

​

我为什么要用表格？

1. actions with side-effects should use POST。
2. 我不想使用javascript在普通HTML运行良好的地方发布文章。

Answer 1

您可以创建类修饰符，并将其与引导程序的.form-group类一起使用。

.form-group--flex {
  display: flex;
  flex-wrap: wrap;
}
.form-group--flex button {
  border-radius: 0;
}

然后，对于border-radius，可以使用伪选择器。

.form-group--flex form:first-of-type button {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.form-group--flex form:last-of-type button {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

代码片段：

​

.form-group--flex {
  display: flex;
  flex-wrap: wrap;
}
.form-group--flex button {
  border-radius: 0;
}
.form-group--flex form:first-of-type button {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.form-group--flex form:last-of-type button {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="form-group form-group--flex">
  <form method="post" action "./action1">
    <button type="submit" class="btn btn-danger">Action with side-effect 1</button>
  </form>
  <form method="post" action "./action2">
    <button type="submit" class="btn btn-default">Action with side-effect 2</button>
  </form>
  <form method="post" action "./action3">
    <button type="submit" class="btn btn-warning">Action with side-effect 3</button>
  </form>
</div>

​

备注：

引导类.form-group所做的唯一的事情就是添加一个页边距底部。

.form-group {
    margin-bottom: 15px;
}