Question

我注意到有类似的问题，但是我尝试了给定的解决方案，但没有任何效果*
我的自定义CSS文件已100％正确链接到我正在使用的html文件*
我正在使用Bootstrap v4.3.1 *

因此，正如标题所示，我正在尝试在Bootstrap按钮内对齐文本-我需要使用自己的自定义CSS文件来做到这一点。

我创建了新的style.css文件并将其链接到标题（在Bootstrap CSS链接之后），然后在Bootstrap按钮中添加了自定义类（btn1）：

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn1" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>

然后我在CSS中添加了以下代码：

.btn1{
  text-align: left !important;
}

但是按钮上的文本仍未向左对齐。关于其发生的原因以及解决问题的方法有什么见解？

谢谢！

Answer 1

您将需要将自定义css上的padding更改为0，因为这仍在使用bootstrap padding。然后，您可以将宽度设置为任意大小，并根据需要添加自定义填充。

示例：

.btn1{
  text-align: left !important;
  padding: 0;
  width: 50px;
}

Answer 2

尝试这种方式

QXcbConnection: Could not connect to display

请注意，您无需添加.btn.btn1{ text-align: left; min-width:250px; }

Answer 3

引导程序中的按钮是inline-block元素，没有定义的宽度。因此，text-align: left不起作用。

您需要明确指定宽度并使用align-left。并且，如果您需要删除左侧填充的事件，请使用pl-0。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-5">
  <div class="row">
    <div class="col">
      <button class="btn btn-primary pl-0">Button</button>
    </div>
    <div class="col">
      <button class="btn btn-primary w-100 text-left">Button</button>
    </div>
    <div class="col">
      <button class="btn btn-primary pl-0 w-100 text-left">Button</button>
    </div>
  </div>
</div>

https://codepen.io/anon/pen/MMgxKz

在Bootstrap按钮内对齐文本

3 个答案: