Question

目前使用bootstrap处理天气应用程序，在一行中我有两列：一侧显示温度，可以在C和F之间切换，另一侧显示其他基本天气信息（现在我只是有一个基本的天气描述）。但是当我在C和F之间切换温度时，这两个字母的宽度差异似乎会将天气信息略微向左或向右推。

我尝试过应用position：absolute / relative和float两个元素，但似乎无法解决问题。任何帮助将不胜感激！

我的所有代码都在Codepen中：https://codepen.io/alissaw/pen/pppzwd但这里是隔离的元素特定代码（#weatherdata是转移的元素）：

   <body>
  <div>
    <h1 id = "location">
    </h1>
  </div>
  <div class="loader"></div>
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <label class="switch">
          <input type="checkbox">
          <div class="slider">
          </div>
          <div class="text"></div>
        </label>
        <p id="temp"></p>
      </div>
      <div class="col-md-6">
        <h2 id="weatherData">
        </h2>
      </div>
    </div>
  </div>

--- CSS ---
body{
  background-color: #4FCCFF;
  text-align: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.container{
  background-color: rgba(0,0,0,0.1);
  width: 70%;
  margin: auto;
  overflow:hidden;
}
#location{
  text-align: center;
  font-size: 60px;
  color: white;
  font-family: Raleway;
  font-weight: 200;
}
#temp{
      font-size: 100px;
      font-family: Raleway;
      font-weight: 250;
      float: left;
      color: white;
    }

#weatherData{
  font-size: 40px;
  color: white;
  font-family: Raleway;
  font-weight: 200;
  margin-top: 5%;
  display: inline-block;
  position: absolute;
}

Answer 1

所以在你的codepen中我注意到你使用了bootstrap类但没有添加bootstrap CSS文件。我添加了CSS文件，它看起来没有移动就好了。

从设置尝试添加引导程序文件： https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.3/css/bootstrap.css

当切换相邻列中的元素时，col中的元素会略微移位

1 个答案: