Bootstrap Вопросы - PullRequest
Новая
       4

Bootstrap Вопросы

0 голосов
/ 05 декабря 2018

Следующий шаблон для непрерывной формы.Это почти идеально на мобильном устройстве.он использует классы начальной загрузки, для которых я только представляю себя.На компьютере форма занимает слишком много места.Мне нужно: 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>

Ответы [ 2 ]

0 голосов
/ 05 декабря 2018

Вы также можете добавить медиа-запросы к своему CSS-коду. 

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

Так же, как вы можете редактировать определенные CSS-блоки.

0 голосов
/ 05 декабря 2018

изменение деформация на строка

это будет выглядеть более широким и более центрированным 

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

и уменьшит заполнение основы

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...