Question

当其中一个按钮包装在表单中时，如何在小屏幕上将两个按钮显示为块元素，在大屏幕上如何显示内联元素？

我有两个按钮，一个只是一个本地链接，另一个（由我的同事）包装在一个from内。现在，在较小的屏幕上显示页面时出现问题。表单内的按钮将不再显示为块元素。

结果应如下所示：

小屏幕：

| button1 |

| button2

大屏幕：

| button1 | | button2 |

到目前为止，我的代码：

https://www.bootply.com/CETPAyWp2K

（调整屏幕宽度以查看效果）

Answer 1

使用w-100至button[type="submit"] 并在lg屏幕的media-query中使用：

@media (min-width: 992px) {
    form {
        display: inline;
    }
    button[type="submit"]{
  width: auto!important;
}
}

请参见小提琴：https://jsfiddle.net/m9n4dgw7/5/

form { display: block; 

}


@media (min-width: 992px) {
    form {
        display: inline;
    }
    button[type="submit"]{
  width: auto!important;
}
}

<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col" class="text-right">Action</th>
    </tr>
  </thead>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  <tbody>
    <tr>
      <td class="content_name">Samplecol 1</td>
      
      <td class="text-right">
        <a class="btn btn-warning btn-sm btn-edit d-block d-lg-inline mb-1 mb-lg-0" href="#">Edit</a>
        <form action="http://localhost:10777/Delete/3aac236e" method="post">
          <button type="submit" class="btn btn-danger btn-sm w-100 d-block d-lg-inline mb-1 mb-lg-0">Delete</button>
        </form>
      </td>
      
    </tr>
    <tr>
      <td class="content_name">Samplecol 2</td>
      
      <td class="text-right">
        <a class="btn btn-warning btn-sm btn-edit d-block d-lg-inline mb-1 mb-lg-0" href="#">Edit</a>
        <form action="http://localhost:10777/Delete/d81de31b" method="post">
          <button type="submit" class="btn btn-danger btn-sm w-100 d-block d-lg-inline mb-1 mb-lg-0">Delete</button>                        	
        </form>
      </td>
      
    </tr>                
    
  </tbody>
</table>

Answer 2

您需要更新样式，以使按钮在移动视图中占据全部空间。尝试使用以下样式，该样式应该起作用：

form { display: block; }

form button {
   width:100%;
}
@media (min-width: 992px) {
    form {
        display: inline;
    }

    form button {
       width: auto;
    }
}

Answer 3

您可以使用Bootstrap及其网格来进行响应按钮。

例如，您可以按以下方式使用它：

<td class="text-right">
    <a class="btn btn-warning btn-sm col-md-3 col-sm-12 mb-1 mb-lg-0" href="#">Edit</a>
    <form action="http://localhost:10777/Delete/3aac236e" method="post">
        <button class="btn btn-danger btn-sm d-block d-lg-inline col-md-3 col-sm-12 mb-1 mb-lg-0" type="submit">Delete</button>
    </form>
</td>

在此示例中，按钮在小型设备上使用全角，在其他设备上使用1/4宽度。

将一个按钮包装到表单中后，如何将按钮显示为行内/块元素？

3 个答案: