如何水平放置表格（连续）？

Posted 2023-03-05

【中文标题】如何水平放置表格（连续）？

【英文标题】：How to place the form horizontally (in a row)?

【发布时间】：2021-06-08 21:20:38

【问题描述】：

我有一个表格，我尝试自己做，但没有找到如何使字段连续（水平）。我非常感谢，因为我花了很多时间并没有找到解决方案。

我的观点business.blade.php

@extends('layouts.layout')
@section('title')Бізнес@endsection
@section ('main_content')
    <h1>Бизнес</h1>
    <p>
    <table class="table table-dark">
            <thead>
              <tr>
                <th scope="col">Name</th>
                <th scope="col">Mail</th>
                <th scope="col">Website</th>
                <th scope="col">Delete</th>
              </tr>
            </thead>
            <tbody>
                @foreach ($business as $singleBusiness)
                <tr>
                    <td> $singleBusiness->name</td>
                    <td> $singleBusiness->mail</td>
                    <td> $singleBusiness->website</td>
                    <td><a href="/delete/ $singleBusiness->id ">
       <button class="btn btn-danger btn-delete">Delete</button></a></td>
              </tr>
              @endforeach
            </tbody>
        </table>
    </p>
    <form method="post" action="/business">
         csrf_field() 
        <fieldset>
                <div class="form-row align-items-center">
                    <div class="col-sm-3 my-1">
            <label for="name" class="sr-only"></label>
            <input type="text" class="form-control" id="name" name="name" placeholder="Name">
        </div>
                        <div class="col-sm-3 my-1">
            <label for="mail" class="sr-only"></label>
            <input type="text" class="form-control" id="mail" name="mail" placeholder="Mail">
        </div>
                            <div class="col-sm-3 my-1">
            <label for="website" class="sr-only"></label>
            <input type="text" class="form-control" id="website" name="website" placeholder="Website">
        </div>
        <button type="submit" class="btn btn-outline-warning mb-2">Додати</button>
                </div>
        </fieldset>
    </form>
@endsection

【问题讨论】：

有一个内联表单例子getbootstrap.com/docs/4.6/components/forms/#inline-forms?

或者，使用<tfoot> 并将表单字段放在那里，假设您希望字段与列对齐？

【参考方案1】：

CSS：

.container 
    display: flex;        // Distribute horizontally
    flex-wrap: wrap;      // If elements overflow the width of the container, put below
    align-items: center;  // Align items vertically

这将使容器水平分布其内容。 "align-items: center" 样式是可选的，它将垂直对齐元素。

我看到你使用表格，我不建议使用表格，它们的响应速度很糟糕。而是使用 flex，如下所示：

<style>
.row 
    display: flex;   // Distribute horizontally


.row > .column 
    flex: 1;    // All columns same width
    // or
    flex: 0 0 25%;   // Each column 25%

</style>

<div class="row">
    <div class="column">Name</div>
    <div class="column">Mail</div>
    <div class="column">Website</div>
    <div class="column">Delete</div>
</div>

<div class="row">
    <div class="column"><input></div>
    <div class="column"><input></div>
    <div class="column"><input></div>
    <div class="column"></div>
</div>

您也可以使用引导行和列，但我将解释如何自己完成。