引导CSS移动调整问题

我在将页面重新调整为移动大小时遇到了使用Bootstrap的问题。输入表单正在转向内联，并且一旦窗口调整大小，我正在使用的图形不会保持在同一位置。在调整窗口大小之前和之后，我在下面列出了两张图片。输入部分引导CSS移动调整问题

HTML代码：

 <div class="col-sm-4" id="end"> 
      <div class="row"> 
       <div class="col-sm-6" id="start"> 
        <span class="top">Date and Time</span> 
        <div class="input-group"> 
         <div class = "input-group-addon"><span id="icon" class="glyphicon glyphicon-time"></span></div> 
         <input type="text" class="col-xs-4" id="date"> 
         <input type="text" class="col-xs-4" id="time"> 
        </div> 
        <button type="button" class="btn btn-info btn-sm" id="submit" onclick="getData()">Search</button> 
       </div> 
       <div class="col-sm-6" id="start"> 
       </div> 
      </div> 

     </div>

CSS日期和时间的ID：

#date { 
max-width: 100px; 
min-width: 100px; 
font-size: 12px; 
} 

#time { 
max-width: 100px; 
min-width: 100px; 
margin-bottom: 0px; 
font-size: 12px; 
}

Normal sized look

Mobile sized look

来源

2017-10-11 Nexxus

你的HTML是不正确的 – LSKhan

什么是不正确的？ – Nexxus

如果调整您的#date和#time机器人h到min-width: 100px和max-width: 100px，你的div不会大于或小于100px。也许你应该使用三个声明，如： width: 150px，min-width: 100px和max-width: 200px;

另一种方式是百分比大小或@media screen and (...)

w3schools已想通了一个学习如何与处理一个很好的实况全部不同的上浆方式。

来源

2017-10-11 19:57:32

哦，这是有趣的，我没有看到这之前谢谢分享 – Nexxus

有这么多的网站要学习这么多！请参阅：[css技巧]（https://css-tricks.com/），[codepen]（https://codepen.io/），并尝试自己的内容并加以使用[jsfiddle]（https：// jsfiddle .net /） –

这不是最美的解决方案，但您可以尝试强制“输入”的宽度，因为它可以与class="col-lg-12"一样宽。

像这样：

 <div class="col-sm-4" id="end"> 
     <div class="row"> 
      <div class="col-sm-6" id="start"> 
       <span class="top">Date and Time</span> 
       <div class="input-group"> 
        <div class = "input-group-addon"><span id="icon" class="glyphicon glyphicon-time" ></span></div> 
        <input type="text" class="col-lg-12" id="date"> 
        <input type="text" class="col-lg-12" id="time"> 
       </div> 
       <button type="button" class="btn btn-info btn-sm" id="submit" onclick="getData()">Search</button> 
      </div> 
      <div class="col-sm-6" id="start"> 
      </div> 
     </div>

来源

2017-10-11 20:04:52 GrimbiXcode

谢谢，这似乎保持输入居中，当我改变宽度，但它不保持接近输入的图形仍然。 – Nexxus

引导CSS移动调整问题

回答

相关问题