Question

我是引导程序的初学者，一些文本都在哪里，我该如何设置它我试图制作一些应用它不适用于所有移动设备，它只适用于 iPhone 6+和nexus 6p 我该怎么办？的 HTML

<div class="progress-bar position" data-percent="48" data-duration="1000" data-color="#63676e,#ec9850"><script>$(".progress-bar").loading();</script></div>

<div id="Main">
<h2 class="text-color-header">Room Utilization</h2>
        <h5 class="text-header">9 rooms occupied today</h5>

        <div id="container">

       <div class="block block-1">
         <h1>$ 2,300</h1>
         <h5>Today Revenue</h5>
       </div>
       <div class="block block-2">
         <h1>$ 12,100</h1>
         <h5>Reservation for next 15 days</h5>
       </div>
       <div class="block block-3">
         <h1>$ 41,000</h1>
         <h5>Revenue Todate / Month</h5>
       </div>
       <div class="block block-4">
         <h1>$ 53,100</h1>
         <h5>Expected Revenue for this month</h5>
       </div>

       <!--Menu Part 02-->
       <div id="base">
         <div class="base-block">
           <h4>Payments</h4>
           <h1>$ 2,000</h1>
           <h5>5 check-outs today</h5>
         </div>
         <div class="base-block">
           <h4>Down Payments</h4>
           <h1>$ 300</h1>
           <h5>2 Bokings withdown payments</h5>
         </div>

       </div>
       <!-- End of menu Part-->
     </div>
</div>

CSS

body{webkit-overflow-scrolling: touch;}
.text-color-header { margin-top: 250px;}
/* Progress Bar */

.progress-bar {
  text-align: center;
    height: 150px;
    width: 150px;
margin-left: 100px;
}

.progress-bar {
    float: left;
    width: 0;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;

    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease;
}
.progress-bar div {
    position: absolute;
    height: 200px;
    width: 200px;
    border-radius: 50%;
}
.progress-bar div span {
    position: absolute;
    font-family: Arial;
    font-size: 35px;
    line-height: 175px;
    height: 175px;
    width: 175px;
    left: 12.5px;
    top: 12.5px;
    text-align:center;
    border-radius: 50%;
    background-color:#e0e0e0;
    color: black;

}
.progress-bar .background {
    background-color: #b3cef6;
}
.progress-bar .rotate {
    clip: rect(0 100px 200px 0);
    background-color: #4b86db;
}
.progress-bar .left {
    clip: rect(0 100px 200px 0);
    opacity: 1;
    background-color: #b3cef6;
}
.progress-bar .right {
    clip: rect(0 100px 200px 0);
    transform: rotate(180deg);
    opacity: 0;
    background-color: #4b86db;
}
@keyframes toggle {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
/*End of Progress Bar*/

.page {
    margin: 0px auto;
    display: flex;
}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
.clearfix {
    display: inline-block;
    margin: 0px auto;
}
h5,
.h5 {
    font-size: 13px;
    text-align: center;
}
.block {
    width: 200px;
    height: 100px;
    margin: 1px;
    display: inline-block;
    background: ;
    color: #d4c4b6;
}
.block:hover h1 {
    color: #000000;
}
.block:hover h5 {
    color: #A48973;
}
#base {
  background: #e2e2e2;
    display: inline-block;
    height: 120px;
    margin-left: 0px;
    margin-top: -7px;
    position: relative;
    width: auto;

}
#base:before {
    border-bottom: 35px solid #e2e2e2;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    content: "";
    height: 0;
    left: 173px;
    position: absolute;
    top: -20px;
    width: 0;
}
h1,
.h1 {
    font-size: 27px;
    text-align: center;
}
h2,
.h2 {
    font-size: 20px;
    text-align: center;
}
h4,
.h4 {
    font-size: 16px;
    text-align: center;
}
.base-block {
    display: inline-block;
    height: 120px;
    width: 200px;
    margin: 1px;
    display: inline-block;
}
.base-block h1,
h4 {
    color: #000000;
}
.base-block h5 {
    color: #A48973;
}
.navbar-default .navbar-brand {
    color: #A48973;
}
.navbar-default .navbar-toggle {
    border: none;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #A48973;
}
.search-bar {
    padding: 7px 15px;
}
/*Start Media query*/

@media (max-width: 768px) {
    .form-control {
        padding: 6px 100px;
    }
}
/*End Of Media query*/

Answer 1

对div使用bootstrap网格布局类col-xs-6而不是block-1，block-2。在你的css中，设置宽度和高度的百分比而不是px中的数字。另外，尽量不要设置高度，而是设置宽度。在每个div中使用panel和panel-body等类。将整个内容放入

<div class="container-fluid">
//Create three rows
<div class="row">
//create 2 divs with class col-xs-6 
</div>
<div class="row">
//create 2 divs with class col-xs-6 
</div>
<div class="row">
//create 2 divs with class col-xs-6 
</div>
</div>

Answer 2

我无法添加评论，所以我只会与Amit的回答相提并论。确保这一点 def get_context_data(self, **kwargs): context = super().get_context_data(**kwargs) context["my_object"] = self.object return context也在你的头标签中。它将页面视口大小设置为设备的px大小。没有它，代码Amit建议不起作用。总而言之，您的代码中并没有实际使用任何Bootstrap。我还建议通过这个来了解Bootstrap DetailView

的真实理解

移动响应不适用于所有移动设备

2 个答案: