Question

我使用bootstrap创建了一个示例网站，但是当我尝试重新调整窗口大小或在网站移动右侧打开网站时，您可以在chaddi.tk上查看网站

HTML here

    .burger {
  display: inline-block;
  border: 0;
  background: none;
  outline: 0;
  padding: 0;
  cursor: pointer;
  border-bottom: 4px solid currentColor;
  width: 28px;
  transition: border-bottom 1s ease-in-out;
  -webkit-transition: border-bottom 1s ease-in-out;
}
.burger::-moz-focus-inner {
  border: 0;
  padding: 0;
}
.burger:before {
  content: "";
  display: block;
  border-bottom: 4px solid currentColor;
  width: 100%;
  margin-bottom: 5px;
  transition: transform 0.5s ease-in-out;
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger:after {
  content: "";
  display: block;
  border-bottom: 4px solid currentColor;
  width: 100%;
  margin-bottom: 5px;
  transition: transform 0.5s ease-in-out;
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
}

.burger-check {
  display: none;
}

.burger-check:checked ~ .burger {
  border-bottom: 4px solid transparent;
  transition: border-bottom 0.8s ease-in-out;
  -webkit-transition: border-bottom 0.8s ease-in-out;
}
.burger-check:checked ~ .burger:before {
  -ms-transform: rotate(-405deg) translateY(1px) translateX(-3px);
      transform: rotate(-405deg) translateY(1px) translateX(-3px);
  -webkit-transform: rotate(-405deg) translateY(1px) translateX(-3px);
  transition: transform 0.5s ease-in-out;
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger-check:checked ~ .burger:after {
  -ms-transform: rotate(405deg) translateY(-4px) translateX(-5px);
      transform: rotate(405deg) translateY(-4px) translateX(-5px);
  -webkit-transform: rotate(405deg) translateY(-4px) translateX(-5px);
  transition: transform 0.5s ease-in-out;
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
}

.navigation {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: max-height 0.5s ease-in-out;
          transition: max-height 0.5s ease-in-out;
}

.burger-check:checked ~ .navigation {
  max-height: 500px;
  -webkit-transition: max-height 0.5s ease-in-out;
          transition: max-height 0.5s ease-in-out;
}

body {
  background-color: #E9E9E9;
  font-family: 'Libre Baskerville', serif;
  font-size: 30px;
  display:center;
  padding-top:10px;
  padding-left:10px;
  padding-right:10px;
}

a {
  color: inherit;
}

small {
  font-size: 14px;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
  font-size: 25px;
  padding: 5px 0;
}
li a {
  text-decoration: none;
}
li a:hover {
  text-decoration: underline;
}
h1{
    font: bold;
    text-align: center;
}
.table {
  padding-left: 50px;
  padding-right:50px;
}
#main_table{
    float: center;
    width: 900px auto;
    margin: 30px; 
    border-top: 2px solid #808080;
    border-bottom: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #808080;
}
.modal {
  text-align: center;
  font-size: 70%;
}

.modal:before {
  display: inline-block;
  vertical-align: middle;
  content: " ";
  height: 100%;
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}
html, body {width: 100%;}

这里

SELECT t.*
FROM tasktemplates tmp RIGHT JOIN task t ON t.templateid = tmp.id 
WHERE (t.templateID = '1' or t.id = '1');

我是新手，所以如果你发现任何错误，请告诉我解决方案

Answer 1

您错过了.container元素。

<body>
     <!-- sometimes we put the nav here -->
     <div class="container">
         <!-- your markup -->
     </div>
</body>

看看at this demo bootply

Answer 2

请将您的标题和表格放在.container课程中，并从mystyle.css中移除#main_table ID的边距

Answer 3

尝试将表放在带有jumbotron类的div中。然后你可以使用css设计jumbotron的样式。 jumbotron是响应式的，我相信它保持在视口的70％。您的代码如下所示：

<div class="jumbotron"><!--Begin of the jumbotron div-->
    <div class="page-header">
        <h1>Example page header</h1>  <!--Practical name and number  -->
    </div>
        <div class="table-responsive" id="main_table">
            <table class="table table-hover">
            <thead>
              <tr>
                <th class="text-center">No.</th>
                <th class="text-center">Name</th>
                <th class="text-center">Download</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="text-center">1</td>
                <td class="text-center">xxxx</td>
                <td class="text-center"><a href="download/1.jpg" download="TT.png"><button type="button" class="btn btn-success">DOWNLOAD</button></a></td>
              </tr>
              <tr>
                <td class="text-center">2</td>
                <td class="text-center">yyyy</td>
                <td class="text-center"><a href="download/2.jpg" download="TT.png"><button type="button" class="btn btn-success">DOWNLOAD</button></a></td>
              </tr>
              <tr>
                <td class="text-center">3</td>
                <td class="text-center">zzzzz</td>
                <td class="text-center"><a href="download/3.jpg" download="TT.png"><button type="button" class="btn btn-success">DOWNLOAD</button></a></td>
              </tr>
            </tbody>
          </table>
      </div>
</div><!--End of the jumbotron div-->

如何修复引导体

3 个答案: