Question

我正在尝试创建一个数据库，并且我使用Bootstrap进行设计，但我并不熟悉它。无论我如何编辑表格的标签，我都无法做到正确。我的数据库看起来像http://imgur.com/bQsrxyy，你可以看到，两侧有一个很大的空间。我希望它们更窄。此外，当我尝试插入新条目时，结构变为这样http://imgur.com/npQt0Im。是否也可以将搜索字段与查找按钮对齐？以下是该页面的代码。非常感谢！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link   href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
            <div class="row">
                <h3><center>Library & Archives Collection</center></h3>
            </div>
            <div class="row">
                <p>
                    <a href="new.php" class="btn btn-success">New</a>
                <form align=right action="search.php" method="GET">
                    <input type="text" name="query" />
                    <input type="submit" value="Find" class="btn btn-success" />
                </form>
                </p>

                <table class="table table-striped table-bordered">
                      <thead>
                        <tr>
                          <th><center>File Name</center></th>
                          <th><center>File Type</center></th>
                          <th><center>File Path</center></th>
                          <th><center>Description</center></th>
                          <th><center>Notes</center></th>
                          <th><center>File Size</center></th>
                          <th><center>Volume & Page Number</center></th>
                          <th><center>Action</center></th>
                          <th><center>Image</center></th>
                        </tr>
                      </thead>
                      <tbody>
                      <?php
                       include 'database.php';
                       $pdo = Database::connect();
                       $sql = 'SELECT * FROM collection ORDER BY id DESC';
                       foreach ($pdo->query($sql) as $row) {
                                echo '<tr>';
                                echo '<td width=75>'. $row['filename'] . '</td>';
                                echo '<td width=75>'. $row['filetype'] . '</td>';
                                echo '<td width=75>'. $row['filepath'] . '</td>';
                                echo '<td width=150>'. $row['description'] . '</td>';
                                echo '<td width=150>'. $row['notes'] . '</td>';
                                echo '<td width=75>'. $row['filesize'] . '</td>';
                                echo '<td width=100>'. $row['volumepagenumber'] . '</td>';
                                echo '<td width=150><center>';
                                echo '<a class="btn" href="view.php?id='.$row['id'].'">View</a>';
                                echo '&nbsp;';
                                echo '<a class="btn btn-success" href="edit.php?id='.$row['id'].'">Edit</a>';
                                echo '&nbsp;';
                                echo '<a class="btn btn-danger" href="delete.php?id='.$row['id'].'">Delete</a>';
                                echo '<td width=100>'. $row['image'] . '</td>';
                                echo '</center></td>';
                                echo '</tr>';
                       }
                       Database::disconnect();
                      ?>
                      </tbody>
                </table>
        </div>
    </div> <!-- /container -->
  </body>
</html>

Answer 1

首先，您尝试输入的文本是连续的单词，如果有空格，它将被移动到下一行，否则表格会相应地增加其宽度。老实说，我无法找到解决方法。

除此之外，您所谈论的两侧空间来自.container类，因此只需要一点CSS，我们就可以使表适合屏幕：

.container-center{
    margin: 0 auto;
}
<div class="container .container-center col-md-12 col-xs-12 col-lg-12">

col-md-12, col-xs-12, col-lg-12类构成引导网格，有助于查看适合屏幕的表格。关于他们的更多信息here.

至于将 find 按钮与input对齐，您可以添加此css：

input[type=text].form-control{
display:inline-block;
width:auto;
vertical-align: middle;
}
<input type="text" name="query" class="form-control" />

form-control课程设计你的input框 boostrap方式。

您可以在此处查看其外观：

Full Result （ JSFiddle）

Bootstrap - 固定列

1 个答案: