blocks|key|361716|text|你不能仅仅添加一个边框到跨度，因为它会破坏布局，因为宽度的计算方式是:宽度=边框%2B填充%2B宽度。由于容器是940px，跨度是940px，添加2px边框(总共4px+)将使其看起来偏离中心。解决办法是更改宽度以包含4px边框(原始-+4px)，或者在内部使用另一个div来创建2px边框。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|361717|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>You can't just add a border to the span because it will break the layout because of the way width is calculate: width = border + padding + width. Since the container is 940px and the span is 940px, adding 2px border (so 4px altogether) will make it look off centered. The work around is to change the width to include the 4px border (original - 4px) or have another div inside that creates the 2px border.</p>


blocks|key|143663|text|不幸的是，这就是边框的作用，它们被算作元素占据的空间的一部分。请允许我介绍一下border不太为人所知的表亲：outline。它实际上与border相同。唯一不同的是，它的行为更像长方体阴影，因为它不会占用布局中的空间，而且它必须位于元素的所有4个边。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|143664|http://codepen.io/cimmanon/pen/wyktr|143665|.foo+{
++++outline:+1px+solid+orange;
}|code-block|syntax|javascript|143666|entityMap|0|LINK|mutability|MUTABLE|url^0|1J|7|0|0|10|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|H|3|I|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|G]]]]

<p>Unfortunately, that's what borders do, they're counted as part of the space an element takes up.  Allow me to introduce border's less commonly known cousin:  <code>outline</code>.  It is virtually identical to border.  Only difference is that it behaves more like box-shadow in that it doesn't take up space in your layout and it has to be on all 4 sides of the element.</p>

<p><a href="http://codepen.io/cimmanon/pen/wyktr" rel="noreferrer">http://codepen.io/cimmanon/pen/wyktr</a></p>

<pre><code>.foo {
    outline: 1px solid orange;
}
</code></pre>


blocks|key|361771|text|从Bootstrap+3开始，您可以使用Panel类：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|361772|<div+class="panel+panel-default">Surrounded+by+border</div>|offset|length|style|CODE|361773|在Bootstrap+4中，您可以使用边界类：|361774|<div+class="border+border-secondary">Surrounded+by+border</div>|361775|entityMap^0|0|0|1N|0|0|0|1R|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@$D|P|E|Q|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|R|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|S|8|@$D|T|E|U|F|G]]|9|@]|A|$]]|$1|L|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|M|$]]

<p>As of Bootstrap 3, you can use Panel classes:</p>

<p><code>&lt;div class="panel panel-default"&gt;Surrounded by border&lt;/div&gt;</code></p>

<p>In Bootstrap 4, you can use Border classes:</p>

<p><code>&lt;div class="border border-secondary"&gt;Surrounded by border&lt;/div&gt;</code></p>


blocks|key|143711|text|如果你需要一个基本的边界，你只需要使用bootstrap+well。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|143712|例如，下面的代码：|143713|<div+class="well">Basic+Well</div>|code-block|syntax|javascript|143714|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>If you need a basic border around you just need to use bootstrap wells.</p>

<p>For example the code below: </p>

<pre><code>&lt;div class="well"&gt;Basic Well&lt;/div&gt;
</code></pre>


blocks|key|143741|text|如果您使用的是Bootstrap4和更高版本，请尝试使用border+border-primary在空div周围放置边框，下面是我的代码示例：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|143742|<div+class="row+border+border-primary">
++++++++<div+class="col+border+border-primary">logo</div>
++++++++<div+class="col+border+border-primary">navbar</div>
++++</div>|code-block|syntax|javascript|143743|下面是指向Bootstrap4中的边界实用程序的链接：https://getbootstrap.com/docs/4.2/utilities/borders/|143744|entityMap|0|LINK|mutability|MUTABLE|url|https://getbootstrap.com/docs/4.2/utilities/borders/^0|S|L|0|0|R|1G|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>If you are using Bootstrap 4 and higher try this to put borders around your empty divs use <code>border border-primary</code> here is an example of my code:</p>
<pre><code>&lt;div class=&quot;row border border-primary&quot;&gt;
        &lt;div class=&quot;col border border-primary&quot;&gt;logo&lt;/div&gt;
        &lt;div class=&quot;col border border-primary&quot;&gt;navbar&lt;/div&gt;
    &lt;/div&gt;
</code></pre>
<p>Here is the link to the border utility in Bootstrap 4:
<a href="https://getbootstrap.com/docs/4.2/utilities/borders/" rel="nofollow noreferrer">https://getbootstrap.com/docs/4.2/utilities/borders/</a></p>


<p>How can I solve this problem?
When you add borders to a div, the div is not centered and
the <code>span12</code> class is not centered.</p>

<p>I would like to center the div with the borders</p>

<pre><code>&lt;div class="row" &gt;
   &lt;div class="span12" style="border: 2px solid black"&gt;
      &lt;div class="row"&gt;
         &lt;div class="span4"&gt;
            1
         &lt;/div&gt;
         &lt;div class="span4"&gt;
            2
         &lt;/div&gt;
         &lt;div class="span4"&gt;
            3
         &lt;/div&gt;
      &lt;/div&gt;
   &lt;/div&gt;
&lt;/div&gt;
</code></pre>


How to use border with Bootstrap

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我该如何解决这个问题？向div添加边框时，div不居中，span12类也不居中。我想用边框居中显示div<div class="row" >   <div class="span12" style="border: 2px solid black">      <div class="row">         <di...

问如何通过Bootstrap使用边框
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何通过Bootstrap使用边框EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何通过Bootstrap使用边框
EN