css - 在较小的分辨率下查看时如何更改左边距样式(响应式)

Question

“marginleft:-13%”在 1200px+ 时效果最佳，但在平板电脑或手机上查看时，我需要将 margin-left 分别更改为 -52% 和 -9%。我很难做到这一点。我在 Windows 上运行 bootstrap 2.3.2。

引用网址是 solanosprinklers.net

 <%= form_for @customer, :html => { :class => 'form-horizontal',:style =>'margin-left:-13%'} do |f| %>
    <fieldset>
        <div class="control-group">

        <div class="controls">
          <%= f.text_field :cust_fname, :class => 'text_field', :placeholder =>"First Name" %>
        </div>
        </div>
        <div class="control-group">

        <div class="controls">
          <%= f.text_field :cust_lname, :class => 'text_field', :placeholder =>"Last Name" %>
        </div>
        </div>
        <div class="control-group">

        <div class="controls">
          <%= f.text_field :cust_phone, :class => 'text_field', :placeholder =>"Phone" %>
        </div>
        </div>
        <div class="control-group">

        <div class="controls">
          <%= f.text_field :cust_email, :class => 'text_field', :placeholder =>"Email" %>
        </div>
        </div>

        <div class="control-group">

        <div class="controls">
          <%= f.radio_button :cust_property,'Residential', :class => 'radio_button' %> Residential
          <%= f.radio_button :cust_property,'Commercial', :class => 'radio_button' %> Commercial
        </div>
        </div>
        <div class="control-group">

        <div class="controls">
          <%= f.text_area :cust_notes, :class => 'text_area', :placeholder =>"How can we help ?" %>
        </div>
        </div>

        <div class="">
        <%= f.submit "Send", :class => 'btn btn-primary',:style => "background:green; margin-left:50%" %>

        </div>
    </fieldset>
<% end %>

这里是 bootstrap_and_overrides.css 文件

@import "twitter/bootstrap/bootstrap";

.hero-unit{
    background-color: green;
    padding: 600px;
    margin-bottom: 300px;
}
body {
    padding-top: 41px;
}

.span12 {
    background-color: white;
    padding:0px;
}

.btn-primary {
    background-image: none;
    filter: none;
}
.form-horizontal{
  /* text-align:right; */
  text-align:left;

}
@media (max-width: 767px) {
    #new_customer { margin-left:-52% !important; }
}

@media (max-width: 479px) {
    #new_customer { margin-left:-9% !important; }
}


@import "twitter/bootstrap/responsive";




// Set the correct sprite paths
@iconSpritePath: image-url("twitter/bootstrap/glyphicons-halflings.png");
@iconWhiteSpritePath: image-url("twitter/bootstrap/glyphicons-halflings-white.png");

// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
@fontAwesomeEotPath: asset-url("fontawesome-webfont.eot");
@fontAwesomeEotPath_iefix: asset-url("fontawesome-webfont.eot?#iefix");
@fontAwesomeWoffPath: asset-url("fontawesome-webfont.woff");
@fontAwesomeTtfPath: asset-url("fontawesome-webfont.ttf");
@fontAwesomeSvgPath: asset-url("fontawesome-webfont.svg#fontawesomeregular");

// Font Awesome
@import "fontawesome/font-awesome";

// Glyphicons
//@import "twitter/bootstrap/sprites.less";

// Your custom LESS stylesheets goes here
//
// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here
//
// If you'd like to override bootstrap's own variables, you can do so here as well
// See http://twitter.github.com/bootstrap/customize.html#variables for their names and documentation
//
// Example:
// @linkColor: #ff0000;

Answer 1

将此添加到您的 CSS:

@media (max-width: 767px) {
    #new_customer { margin-left:-52%; }
}

@media (max-width: 480px) {
    #new_customer { margin-left:-9%; }
}