时间戳

首页 > 解决方案 > 当一个按钮被包装到表单中时，如何将按钮显示为内联/块元素？

css - 当一个按钮被包装到表单中时，如何将按钮显示为内联/块元素？

问题描述

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

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

结果应如下所示：

小屏幕：

| 按钮1 |

| 按钮2 |

大屏幕：

| 按钮1 | | 按钮2 |

到目前为止我的代码：

https://www.bootply.com/CETPAyWp2K

（调整屏幕宽度看效果）

标签： csstwitter-bootstrapresponsive-designbootstrap-4

解决方案

使用w-100到 lg 屏幕使用button[type="submit"] ：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>

推荐阅读