html - Bootstrap 是否让我修改他自己的类以使页面响应

Question

我正在创建基于 html 和 css 的元素。我在容器内的 Bootstrap 中创建了这段代码，我希望它能够响应。

<div class=" container">

  <div class="row">

    <div class="col-md-12 col-sm-12 client "> <b>SEI GIÀ CLIENTE? ACCEDI </b>
    </div>
  </div>

  <div class="row">
    <div class="col-md-3 col-sm-3"></div>
    <div class="col-md-3  col-sm-3 labelField">
      <div class="row">
        <div class="col-md-4  col-sm-4 labelField">
          <strong><br>EMAIL</strong>
        </div>
        <div class="col-md-8  col-sm-8">
          <input class="ut" type="mail">
        </div>
      </div>
    </div>
    <div class="col-md-6 col-sm-6"></div>
  </div>
  <div class="row">
    <div class="col-md-3 col-sm-3"></div>
    <div class="col-md-3 col-sm-3 labelField">
      <div class="row">
        <div class="col-md-4 col-sm-4 labelField">
          <strong><br>PASSWORD</strong>
        </div>
        <div class="col-md-8 col-sm-8">
          <input class="ut" type="mail">
        </div>
      </div>
    </div>
    <div class="col-md-6 col-sm-6"></div>
  </div>

  <div class="row">
    <div class="col-md-3  col-sm-3 col-xs-3 "></div>
    <div class="col-md-6 col-sm-6 col-xs-6 pass"><a href="#"> Hai dimenticato la password?</a> 
    </div>
    <div class="col-md-3 col-sm-3 col-xs-3"></div>
  </div>


  <div class="row">

    <div class="col-md-12 col-sm-12 ">
      <a href="#">
        <img src="images/entra.png" class="img-responsive registrati ">
      </a>
    </div>

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

    <div class="col-md-12 col-sm-12 ">
      <a href="#">
        <img src="images/fb.png" class="img-responsive registrati ">
      </a>
    </div>

  </div>



  <div class="row">

    <div class="col-md-12 col-sm-12 ">
      <div class="divider"></div>

      </div

这是我的CSS:

.registrati {
  margin-top: 20px;
  margin-left: 338px;
  margin-bottom: 8px;
  width: 33%px;
}
.pass {
  font-style: Arial black;
  color: black;
  font-size: 0.8em;
  margin-left: 339px;
  margin-bottom: 20px;
  margin-top: 20px;
  text-decoration: underline;
}
   

这是我的结果应该是这样的: 结果没有反应。我的问题是我是不是做错了什么，或者 bootstrap 不允许我像以前那样修改类？那么我应该怎么做才能使它响应？响应所需的所有脚本和链接都在我的页面中，但这里没有更短的演示。谢谢!

Answer 1

我无法在我的 Mac 上运行您的代码片段，但只要查看您的代码，我就会删除 width: 80%; height: 100%; 如果您真的希望它以“Bootstrap 方式”响应，请尝试让它首先根据大小处理您的 div 容器。你试过吗？

在没有样式表的情况下，响应能力看起来不错:https://jsfiddle.net/DTcHh/23755/

编辑:这些边距似乎很大？也许它只是看起来因为巨大的利润而没有响应。您能否提供它应该是什么样子的草图？

EDIT2:这是我的答案:https://jsfiddle.net/DTcHh/23757/我清理了一下。你的问题是你有太多的 div 和列；你应该查看 Bootstrap 的网格 documentation再次使用 col-md-offset 如果你想通过设计来抵消事物。