Twitter Bootstrap - 边界 [英] Twitter Bootstrap - borders

查看：135 发布时间：2017/1/18 23:10:01 css twitter-bootstrap

本文介绍了Twitter Bootstrap - 边界的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我刚刚开始使用Twitter Bootstrap，我有一个问题，如何最好添加边框到父元素？

例如，如果我有

 < div class =main-area span12> 
< div class =row> 
< div class =span9> 
 //也许一些描述文本
< / div> 
< div class =span3> 
 //可能是一个按钮或东西
< / div> 
< / div> 
< / div>

如果我应用这样的边框：

< pre class =lang-css prettyprint-override>

 .main-area {
 border：1px solid #ccc; 
}

网格系统将中断并启动 code>下来到下一行，因为边框的添加宽度......有一个很好的方法，能够添加像边框或填充到父<

如果你看看Twitter自己的 container-app.html 演示在GitHub上，您会得到一些想法
 
 
 例如，下面是其940像素宽的16列网格系统的构建块的提取部分：
  .row {
 zoom：1; 
 margin-left：-20px; 
} 
 
 .row> [class * =span] {
 display：inline; 
 float：left; 
 margin-left：20px; 
} 
 
 .span4 {
 width：220px; 
} 
  
为了允许特定元素的边框， 
 
 
   
 
 
 例如，要允许边栏上的左边框，他们将这个CSS添加到 < link href =../ bootstrap.css =stylesheet> 之后的< head>  / p> 
 
 
  .content .span4 {
 margin-left：0; 
 padding-left：19px; 
 border-left：1px solid #eee; 
} 
  
你会看到他们减少了 padding- left 由 1px 允许添加新的左边框。由于这个规则出现在源顺序的后面，它会覆盖任何先前的或外部的声明。
 
 
 我认为这不是最强大的 / em>优雅的方法，但它说明了最基本的例子。
 
I just started using Twitter Bootstrap, and I have a question about how to best add a border to a parent element?

for instance, if I have 
 <div class="main-area span12">
    <div class="row">
       <div class="span9">
            //Maybe some description text
       </div>
       <div class="span3">
            //Maybe a button or something
       </div>
    </div>
 </div>
If I apply a border like so:
.main-area {
    border: 1px solid #ccc;
}
The grid system will break and kick span3 down to the next row because of the added width of the border......Is there a good way to be able to add things like borders or padding to the parent <div>s like this?
 解决方案 
If you look at Twitter's own container-app.html demo on GitHub, you'll get some ideas on using borders with their grid.

For example, here's the extracted part of the building blocks to their 940-pixel wide 16-column grid system:
.row {
    zoom: 1;
    margin-left: -20px;
}

.row > [class*="span"] {
    display: inline;
    float: left;
    margin-left: 20px;
}

.span4 {
    width: 220px;
}
To allow for borders on specific elements, they added embedded CSS to the page that reduces matching classes by enough amount to account for the border(s).



For example, to allow for the left border on the sidebar, they added this CSS in the <head> after the the main <link href="../bootstrap.css" rel="stylesheet">.
.content .span4 {
    margin-left: 0;
    padding-left: 19px;
    border-left: 1px solid #eee;
}
You'll see they've reduced padding-left by 1px to allow for the addition of the new left border. Since this rule appears later in the source order, it overrides any previous or external declarations.

I'd argue this isn't exactly the most robust or elegant approach, but it illustrates the most basic example.

                        这篇关于Twitter Bootstrap  - 边界的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！


                    
                        查看全文

Twitter Bootstrap - 边界 [英] Twitter Bootstrap - borders

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

Twitter Bootstrap - 边界 [英] Twitter Bootstrap - borders

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭