Question

我有多个＆＃34; POST＆＃34;按钮（带有单个提交按钮的空表单）来处理一些有副作用的操作。我需要将这些按钮显示为Bootstrap按钮组（.btn-group），就好像它们是应用了a类的.btn标签一样。

我的第一个想法是重现Bootstrap用于.btn-group的所有css样式，但使用form子元素而不是.btn。事实证明，涉及到很多风格！我希望有另一个解决方案。我在片段中包含了将按钮放在一行中所需的第一个基本样式。管理边框，圆角等需要更多样式。

＆＃13;

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

＆＃13;

<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>

＆＃13;

为什么我使用表格？

actions with side-effects should use POST。
我宁愿不使用javascript来POST，其中vanilla HTML工作得很好。

Answer 1

您可以创建一个类修饰符并将其与bootstrap的.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>

备注：

bootstrap的类.form-group唯一能做的就是添加一个底部。

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

将多个POST操作设置为Bootstrap按钮组

1 个答案: