如何响应地设置保证金？ [英] How to setup margin responsively?

问题描述

我的问题是我需要在div的左侧和右侧有一个设定的边距。通过使用col-md-10并不能获得我需要的余量。如果屏幕很宽，则超过10像素。

例如：

 < div class =col- md-offset-1 col-md-10> 
 //内容... 
< / div> 
 
 ------------------------------------- 
 | --------- div -------------- 
 | 10px保证金10px保证金
 | | | 
 | | | 
 | ------------------------------- 
 --------------- ---------------------- 
  

有没有人有如何解决它的想法？非常感谢！

解决方案

如果我明白你总是希望 margin 每边10px的值。您可以创建一个自定义类并使用 calc（），试试这个：

 < div class =col-md-offset-1 col-md-10 margin> 
 //内容... 
< / div> 
 
 .margin {
 margin：0 10px; 
 width：calc（100％ -  20px）; 
} 
  

请检查 BootplyDemo

---

成为容器上的自定义类并使用 padding 。尝试：

 < div class =container margin> 
< div class =col-xs-12> 
 //内容... 
< / div> 
< / div> 
 
 .margin {
 width：100％; 
 padding：0 10px; 
} 
  

另一个 BootplyDemo

I am trying to setup a div with bootstrap.

My problem is that I need to have a set margin on the left and right of the div. By using col-md-10 doesn't get me the margin I need. It's more than 10px if the screen is wide.

For example:

<div class="col-md-offset-1 col-md-10">
    //contents...
</div>

 -------------------------------------
|  ---------    div   --------------
|10px margin              10px margin
|  |                               |
|  |                               |
|   -------------------------------
 -------------------------------------

Does anyone have an idea of how to fix it? Thanks a lot!

解决方案

If I understand you want always a margin value of 10px at each side. You can create a custom class and use calc(), try this:

<div class="col-md-offset-1 col-md-10 margin">
    //contents...
</div>

.margin {
   margin:0 10px;
   width:calc(100% - 20px);
}

Check this BootplyDemo

---

Another Option could be a custom class on the container and use padding. Try:

<div class="container margin">
    <div class="col-xs-12">
        //contents...
    </div>
</div>

.margin {
  width:100%;
  padding:0 10px;
}

Another BootplyDemo

这篇关于如何响应地设置保证金？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！