如何使表格内联

Question

我有3种形式

        <form th:method="get" th:action=="..." th:object="${...}" >
            <input  type="submit" value="Edit" class="btn btn-primary my-2">
        </form>

        <form th:method="delete" th:action="..." th:object="${...}">
            <input type="submit" value="Delete" class="btn btn-secondary my-2">
        </form>

        <form th:method="put" th:action="..." th:object="${...}">
            <input type="submit" value="Back" class="btn btn-primary my-2">
        </form>

如何让它们与 bootstrap

排成一排

Answer 1

您可以简单地将它们包裹在 div 中，然后将它们放在 flex 行中。

.wrap {
  display: flex;
}

<div class="wrap">
  <form th:method="get" th:action=="..." th:object="${...}">
    <input type="submit" value="Edit" class="btn btn-primary my-2">
  </form>

  <form th:method="delete" th:action="..." th:object="${...}">
    <input type="submit" value="Delete" class="btn btn-secondary my-2">
  </form>

  <form th:method="put" th:action="..." th:object="${...}">
    <input type="submit" value="Back" class="btn btn-primary my-2">
  </form>
  <div>

Answer 2

您必须将所有这些表单元素放在 div 中，并按照以下任一方式向 div 添加样式。您也可以使用 wrap 作为样式。

justify-content: center;     /* Pack items around the center */

justify-content: start;      /* Pack items from the start */

justify-content: end;        /* Pack items from the end */


justify-content: flex-start; /* Pack flex items from the start */

justify-content: flex-end;   /* Pack flex items from the end */

justify-content: left;       /* Pack items from the left */

justify-content: right;      /* Pack items from the right */

您可以阅读文档以更好地理解。

如何使表格内联

How to make forms inline

html

css

bootstrap-4