引导问题

【问题标题】：Bootstrap Questions引导问题
【发布时间】：2018-12-05 12:07:38
【问题描述】：

以下模板用于连续表格。它在移动设备上几乎是完美的。它使用我刚刚介绍自己的引导类。在计算机上，表格占用了太多空间。我需要： 1. 减少在更大设备上占用的空间 2.减少每一行的填充而不让它看起来很有趣..注意在线 wrap1 和 wrap2 类 3. 我需要控制小时文本框的宽度 4. 让它在所有设备上看起来都很好

感谢我的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  
  <meta charset="utf-8">
   <link rel="Trade Mark Icon" href="images/cp.ico" />
  <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/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
  <style>
.stickitdown {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: light-grey;
   color: white;
   text-align: center;
}
.ScaleDownNeverUpImage 
{
    max-width: 100%;
    height: auto;
}
.table
 {
     width: 100%
 }
.trhover:hover td {
    background-color: #ffff99; color: #000;
}
.trselected td {
    background-color: #90EE90; 
    color: blue;text-decoration: underline dotted blue;
}
.trselected:hover td {
    background-color: #ffff99; color: #000;
}

.wrap {
 padding:28px;
background-color: #f5f5dc;
border: 1px solid #DDD;
vertical-align: middle;

}
.wrap2 {
 padding:28px;
background-color: #eee8aa;
border: 1px solid #DDD;
vertical-align: middle;

}
</style>
	
<script language="JavaScript" type="text/javascript">
    function toProcessTimesheet() {
        var flagIt = "0"
        if (flagIt == "0") {
            document.toManageTimeSheetsMain.submit()
        }
    }
</script>	
  <title>Trade Mark &#8480; Mobile Quick Add</title> 
</head>
<body >
<div class="container">
  <div class="page-header">
  
   <img border="0" src="../images/Logoz.gif" title="Trade Mark Logo"  alt="Trade Mark Logo" class="ScaleDownNeverUpImage"/> 
   <p> <font style="font-size:medium">Trade Mark &#8480; Mobile Quick Add</font></p>
   
  </div>
<div class="form-group row">
<div class="col-sm-12  col-md-12 col-lg-12">
<div class="row" >
<div >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font style="font-size:3vw; font-weight:bold">Add Timesheet for Jason Supreme&nbsp;PP 09/30/18 </font></div>	   
</div>	  
 <!---- row ------>	
<div class="row">
<div class="wrap">
  <div class="col-sm-4">
    <div class="row">
        <div class="col-sm-1">
            Job
        </div>         
        <div class="col-sm-3">
            <select  id="job_id1" name="job_id1"  class="mdb-select md-form" >       
<option value="588" >1st Job </option> 
<option value="295" >2nd Job </option> 

<option value="42" >3rd Job   </option> 
</select>                      
        </div>
    </div>
  </div>
  <!--------here it goes -------->
  <div class="col-sm-4">
    <div class="row">
        <div class="col-sm-2">
            Date
        </div>          
        <div class="col-sm-2">
             <select  id="wlDate1" name="wlDate1" class="mdb-select md-form">

<option value="9/16/2018 "> 9/16/2018 </option> 

<option value="9/17/2018 "> 9/17/2018 </option> 

<option value="9/18/2018 "> 9/18/2018 </option> 

<option value="9/19/2018 "> 9/19/2018 </option> 

<option value="9/20/2018 "> 9/20/2018 </option> 

<option value="9/21/2018 "> 9/21/2018 </option> 

<option value="9/22/2018 "> 9/22/2018 </option> 

<option value="9/23/2018 "> 9/23/2018 </option> 

<option value="9/24/2018 "> 9/24/2018 </option> 

<option value="9/25/2018 "> 9/25/2018 </option> 

<option value="9/26/2018 "> 9/26/2018 </option> 

<option value="9/27/2018 "> 9/27/2018 </option> 

<option value="9/28/2018 "> 9/28/2018 </option> 

<option value="9/29/2018 "> 9/29/2018 </option> 

<option value="9/30/2018 "> 9/30/2018 </option> 

</select>            
        </div>
    </div>
  </div>
 <!--------here it ends -------->
 <!--------here it goes -------->
  <div class="col-sm-4">
    <div class="row">
        <div class="col-sm-2">
            Hours
        </div>        
        <div class="col-sm-2">
             <input type="text" value="08.00" name="hours1" id="hours1" maxlength="8" class="mdb-select md-form"  " />            
       </div>
    </div>
  </div> 
 <!--------here it ends -------->
 
  </div>
</div>
<!---- row ends ----->
<!---- row ------>	
<div class="row">
<div class="wrap2">
  <div class="col-sm-4">
    <div class="row">
        <div class="col-sm-1">
            Job
        </div>      
        <div class="col-sm-3">
            <select  id="job_id2" name="job_id2"  class="mdb-select md-form" >       
<option value="588" >1st Job </option> 

<option value="295" >2nd Job </option> 

<option value="42" >3rd Job   </option> 
</select>                     
        </div>
    </div>
  </div>    
 <!--------here it ends -------->
 <!--------here it goes -------->
  <div class="col-sm-4">
    <div class="row">
        <div class="col-sm-2">
            Date
        </div>          
        <div class="col-sm-2">
             <select  id="Select1" name="wlDate1" class="mdb-select md-form">
<option value="9/16/2018 "> 9/16/2018 </option>  

<option value="9/17/2018 "> 9/17/2018 </option>  

<option value="9/18/2018 "> 9/18/2018 </option>  

<option value="9/19/2018 "> 9/19/2018 </option>  

<option value="9/20/2018 "> 9/20/2018 </option>  

<option value="9/21/2018 "> 9/21/2018 </option>  

<option value="9/22/2018 "> 9/22/2018 </option>  

<option value="9/23/2018 "> 9/23/2018 </option>  

<option value="9/24/2018 "> 9/24/2018 </option>  

<option value="9/25/2018 "> 9/25/2018 </option>  

<option value="9/26/2018 "> 9/26/2018 </option>  

<option value="9/27/2018 "> 9/27/2018 </option>  

<option value="9/28/2018 "> 9/28/2018 </option>  

<option value="9/29/2018 "> 9/29/2018 </option>  

<option value="9/30/2018 "> 9/30/2018 </option>  

</select>           
        </div>
    </div>
  </div>  
 <!--------here it ends --------> 
 <!--------here it goes -------->
  <div class="col-sm-4">
    <div class="row">
        <div class="col-sm-2">
            Hours
        </div>           
        <div class="col-sm-2">
             <input type="text" value="08.00" name="hours2" id="hours2" maxlength="8" class="mdb-select md-form"  " />            
        </div>
    </div>
  </div>  
 <!--------here it ends -------->
  </div>
</div>
<!---- row ends ----->
<!---- row ------>	
<div class="row">
<div class="wrap">
  <div class="col-sm-4">
    <div class="row">
        <div class="col-sm-1">
            Job
        </div>                 
        <div class="col-sm-3">
            <select  id="job_id3" name="job_id3"  class="mdb-select md-form" >       
<option value="588" >1st Job </option>  

<option value="295" >2nd Job </option>  

<option value="42" >3rd Job   </option>  
</select>           
        </div>
    </div>
  </div>
  <!--------here it goes -------->
  <div class="col-sm-4">
    <div class="row">
        <div class="col-sm-2">
            Date
        </div>          
        <div class="col-sm-2">
             <select  id="wlDate13" name="wlDate13 class="mdb-select md-form">
<option value="9/16/2018 "> 9/16/2018 </option>  

<option value="9/17/2018 "> 9/17/2018 </option>  

<option value="9/18/2018 "> 9/18/2018 </option>  

<option value="9/19/2018 "> 9/19/2018 </option>  

<option value="9/20/2018 "> 9/20/2018 </option>  

<option value="9/21/2018 "> 9/21/2018 </option>  

<option value="9/22/2018 "> 9/22/2018 </option>  

<option value="9/23/2018 "> 9/23/2018 </option>  

<option value="9/24/2018 "> 9/24/2018 </option>  

<option value="9/25/2018 "> 9/25/2018 </option>  

<option value="9/26/2018 "> 9/26/2018 </option>  

<option value="9/27/2018 "> 9/27/2018 </option>  

<option value="9/28/2018 "> 9/28/2018 </option>  

<option value="9/29/2018 "> 9/29/2018 </option>  

<option value="9/30/2018 "> 9/30/2018 </option>  

</select>           
        </div>
    </div>
  </div> 
 <!--------here it ends --------> 
 <!--------here it goes -------->
  <div class="col-sm-4">
    <div class="row">
        <div class="col-sm-2">
            Hours
        </div>        
        <div class="col-sm-2">
             <input type="text" value="08.00" name="hours3" id="hours3" maxlength="8" style="width:25;" class="mdb-select md-form"  " />            
        </div>
    </div>
  </div>  
  <!------- link ------>  
  <!---- link ends ---->  
 <!--------here it ends --------> 
  </div>
</div>
<!---- row ends ----->
</div>
</div>
</body>
</html>

【问题讨论】：

  • 这里的最佳做法是发布格式化代码，因此请格式化它不可读。
  • @Aditi 我把所有东西都编辑成了一个 sn-p 它只需要被批准

标签： javascript html css twitter-bootstrap-3


【解决方案1】：

按行

改变warp

它会看起来更宽更居中

<div class="warp">
    <div class="row">
         ...
    </div>
</div>

和 减少warp padding

【讨论】：

    【解决方案2】：

    您还可以将媒体查询添加到您的 CSS 代码中。

    @media (min-width: 768px) {
    /* Now only screens with a width over 768px are affected */
    .table {
        width: 70%;
    }
}

    就像你可以编辑特定的 CSS 块一样。

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-06-19
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode