我们应该将内联css应用于Bootstrap列吗？

Question

我正在编写代码，我希望它处于我使用padding

的特定位置

。代码看起来像这样。

    <div class="col-xs-12 col-sm-2" style="padding: 40px 5px 4px 4px;">
        <img src="img/logo.png" class="img-responsive">
    </div>

它有效，但我想知道在第一行是将内联css应用于Bootstrap类的好习惯还是应该通过使用Bootstrap来完成这一切？

Answer 1

没有

它不是，甚至在Bootstrap或任何项目中都没有。

这是一个不好的做法，（你应该只在极端情况下使用）。

使用自定义CSS并在那里应用所需的样式。

以下是一个例子：

＆＃13;

＆＃13;

<!-- Bootstrap CSS-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-2">
      <img src="//lorempixel.com/50/50" class="img-responsive">
    </div>
  </div>
</div>

＆＃13;

<m:GetItem Traversal="Shallow">
        <m:ItemShape>
            <t:BaseShape>AllProperties</t:BaseShape>
            <t:AdditionalProperties>
                <t:FieldURI FieldURI="item:Subject"/>
                <t:FieldURI FieldURI="item:TextBody"/>
            </t:AdditionalProperties>
        </m:ItemShape>

＆＃13;

＆＃13;

＆＃13;

您可以在Stack Overflow answer

上看到更多相关信息

文章提到内联样式是不好的做法：

• Avoid Inline Styles for CSS
• Why inline CSS and JavaScript code is such a bad thing

Answer 2

很好但你可以用bootstrap类编写外部CSS类。像：

HTML页面

<div class="col-xs-12 col-sm-2 my-padding" >
        <img src="img/logo.png" class="img-responsive">
</div>

<强> your_external_css：

.my-padding{
    padding: 40px 5px 4px 4px;
}