如何设置按钮引导程序的宽度

Question

如何设置引导按钮的自定义宽度。

我的问题是我不知道如何将按钮的宽度缩小到图像上（它是一个提交按钮）。左边是输入文字。我的问题是按钮太宽。这是代码：

<div class="col-xs-5 col-xs-offset-3">
  <div class="input-group input-group-lg">
    <input type="text" class="form-control input-lg input-forme" id="Text" placeholder="Text">
    <span class="input-group-btn tipka">
      <button type="submit" class="btn btn-group-small" id="form-submit">Submit</button>
    </span>
  </div>
</div>

Answer 1

您可以更改宽度和填充：https://jsfiddle.net/wz8ac5d4/

.btn {
    width:0px;
    padding:5px;
}

此外，你可以为你的btn添加一个类，这是一个更好的做法。

<强> HTML：

<button type="submit" class="btn btn-group-small my-small-btn" id="form-submit">Submit</button>

CSS：

.my-small-btn {
    width:0px;
    padding:5px;
}

Answer 2

定义不同大小的类是：

.btn-LG .btn-MD .btn-SM .btn-XS

参考此链接

http://www.w3schools.com/bootstrap/bootstrap_buttons.asp

Answer 3

你可以用这个来增加它的大小：

.btn {
    width: 100%;
    padding: 5px;
}

Answer 4

我使用max-width和padding。

HTML

<button type="submit" class="btn custom-btn" id="form-submit">Submit</button>

CSS

.custom-btn {
    max-width: 100%;
    padding-left:25px;
    padding-right:25px;
}

您也可以快捷填充。

.custom-btn {
    max-width: 100%;
    padding: 6px 25px;
}

只需将25px调整为想要获得适当尺寸的任何长度即可。

请注意，中号引导程序按钮的标准顶部和底部填充为6px。您必须相应地调整大小按钮。