Question

我有一个Bootstrap响应<string-array name="drawer_titles"> <item >About Us</item> <item>FeedBack</item> <item>Setting</item> <item>Share App</item> <item>Rate Us</item> <item>Logout</item> how can i add list icons to the adapter which contains list items image=(ImageView) findViewById(R.id.image) ; t1=(TextView) findViewById(R.id.t1) ; t2=(TextView) findViewById(R.id.t2) ; mDrawerList.setAdapter(new ArrayAdapter<String>(this, R.layout.drawer_list_item, mDrawerItmes));，它位于table div CSS之内。这似乎阻止了表格的响应。如何在不更改外部display:table的情况下使表格响应？

JsFiddle

作为参考，CSS用于创建“粘性页脚”：How to create a sticky footer that plays well with Bootstrap 3

Answer 1

如果您不想更改当前的css，则必须使文字响应以解决此问题。
设置font size而不是px使用vm，vw，vh或vmin这些后缀会使您的文字具有响应性。

Answer 2

试试这个，可能会对你有帮助

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.content-container {
  height: 100%;
  width: 100%;
  display: table;
}
.table-responsive {
    border: 1px solid #ddd;
    display: -moz-stack;
    margin-bottom: 15px;
    overflow-y: hidden;
    width: 100%;
}


</style>
</head>
<body>

<div class="content-container">
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">Bookings</h3></div>
          <div class="bookings_list">
            <div class="row">
              <div class="col-xs-12">
                <div class="table-responsive">
                  <table class="table table-striped table-hover">
                    <thead>
                      <tr>
                        <th>ID</th>
                        <th>Customer</th>
                        <th>Provider</th>
                        <th>Agent</th>
                        <th>Service</th>
                        <th>Status</th>
                        <th>Status</th>
                        <th>Status</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr class="clickable" action="push" href="/bookings/UY6001">
                        <td>123</td>
                        <td>John Smith</td>
                        <td>ACME Corp</td>
                        <td>Mike</td>
                        <td>123456</td>
                        <td>Active</td>
                        <td>Active</td>
                        <td>Active</td>
                      </tr>
                      <tr class="clickable" action="push" href="/bookings/UY6000">
                        <td>123</td>
                        <td>John Smith</td>
                        <td>ACME Corp</td>
                        <td>Mike</td>
                        <td>123456</td>
                        <td>Active</td>
                        <td>Active</td>
                        <td>Active</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

</body>
</html>

＆＃13;

Answer 3

根据视口而不是百分比值设置container的宽度：

@media (max-width: 768px) {
  .container {
    width: 100vw;
  }
}

Updated Fiddle

由于container是引导程序中非常常见的类，因此您可以考虑将自定义类添加到要添加此样式的特定元素。

显示中的Bootstrap响应表：表

3 个答案: