div不粘在屏幕左侧

时间:2018-11-02 02:24:59

标签: html css twitter-bootstrap-3



有没有办法将包含YMDW按钮的第一个div固定在左侧,并且在屏幕放大时不移动?
并且在YMDW div和输入框div之间添加一些空间。
我是新手,它已经花了我几天时间。
预先谢谢你

<!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/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <div class="row">
     <div class="col-1 col-xs-3 col-sm-2 col-md-2 col-lg-2 form-inline">
        <input type="button" class="btn btn-grey300_rsd pull-right float-right" value="Y" data-viewid="view_yearly">
        <font class="pull-right float-right">&nbsp;</font>
        <input type="button" class="btn btn-grey300_rsd pull-right float-right" value="M" data-viewid="view_monthly">
        <font class="pull-right float-right">&nbsp;</font>
        <input type="button" class="btn btn-blue900_rsd pull-right float-right" value="W" data-viewid="view_weekly">
        <font class="pull-right float-right">&nbsp;</font>
        <input type="button" class="btn btn-grey300_rsd pull-right float-right" value="D" data-viewid="view_dayly">
        <font class="pull-right float-right">&nbsp;</font>
     </div>


    <div class="col-xs-12 col-sm-7 col-md-6 col-lg-5 form-inline">
      <input type="text" class="form-control" id="tx_front_dt" style="text-align:center;width:150px;font-weight:bold;">
    </div>
    <div class="col-lg-3 hidden-md hidden-sm hidden-xs form-inline ">&nbsp;</div>
    <div class="col-xs-12 col-sm-3 col-md-4 col-lg-1 clearfix">
     <input type="button" id="btn_view_inc_page" class="btn btn-blue900_rsd " value="LOGOUT" data-unit-type="upper" data-num="1"><font>&nbsp;</font>
    </div>

  </div>
</div>

</body>
</html>

1 个答案:

答案 0 :(得分:1)

如果您从按钮中删除“向右拉”和“向右浮动”类,则div将卡在屏幕左侧。

<div class="col-1 col-xs-3 col-sm-2 col-md-2 col-lg-2 form-inline">
    <input type="button" class="btn btn-grey300_rsd" value="Y" data-viewid="view_yearly">

    <input type="button" class="btn btn-grey300_rsd" value="M" data-viewid="view_monthly">

    <input type="button" class="btn btn-blue900_rsd" value="W" data-viewid="view_weekly">

    <input type="button" class="btn btn-grey300_rsd" value="D" data-viewid="view_dayly">
</div>