代码之家 › 专栏 › 技术社区 › JonSnow

当一个按钮被包装成一个表单时,如何将按钮显示为内联/块元素?

bootstrap-4 responsive-design twitter-bootstrap css

JonSnow · 技术社区 · 6 年前

当一个按钮被包装在表单中时,如何在小屏幕上显示两个按钮作为块元素,在大屏幕上显示内联元素?

我有两个按钮,一个只是一个本地链接,另一个是包装(由我的同事)内从。现在我在小屏幕上显示页面时遇到了问题。表单中的按钮将不再显示为块元素。

结果应该是这样的:

小屏幕:

|按钮1|

|按钮2|

大屏幕:

|按钮1 | |按钮2|

到目前为止我的代码 :

https://www.bootply.com/CETPAyWp2K

(调整屏幕宽度以查看效果)

3 回复 | 直到 6 年前

Charu Maheshwari 6 年前

您需要更新样式以使按钮在移动视图中占据全部空间。尝试使用以下样式,这应该有效:

form { display: block; }

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

    form button {
       width: auto;
    }
}

××× × ×××× 6 年前

使用 w-100 到 button[type="submit"] 在 media-query lg屏幕使用:

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

Paul92ilm 6 年前

你可以使用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宽度。