Bootstrap网格系统：如何仅更改特定元素的宽度？

Question

如何在不影响default customisation的情况下更改特定元素的bootsrap grd宽度？

这是我的意思的屏幕抓取，

例如，我想更改col-xs-1 较小，如顶行（带添加按钮的行）

<div class="col col-xs-1">
    <input type="checkbox" name="delete[]" />
</div>

<div class="col col-xs-11">
...
</div>

有可能吗？

Answer 1

最简单的方法是在左侧使用auto-layout列...

class Linked_List:

    class __Node:

      def __init__(self, val):
          self.val = val
          self.next = None
          self.prev = None
          return


  def __init__(self):
    self.__header = self.__Node(None)
    self.__trailer = self.__Node(None)
    self.__header.next = self.__trailer
    self.__trailer.prev = self.__header
    self.__size = 0


  def __len__(self):
    return self.__size


  def remove_element_at(self, index):
    if index > self.__size or index < 0 or index == self.__size:
       raise IndexError
    cur = self.__header.next
    element_to_return = cur
    if index == 0:
       self.__header.next = self.__header.next.next
    else:
       for i in range(0, index):
          cur = cur.next
       element_to_return = cur.val
       cur.next = cur.next.next
    self.__size -= 1
    return str(element_to_return.val)

Answer 2

在Bootstrap 4中，您需要添加自定义CSS，例如

<div class="col col-xs-1 col-xs-1point5">
  <input type="checkbox" name="delete[]" />
</div>

<div class="col col-xs-11 col-xs-10point5">
  ...
</div>

添加CSS：-

.col-xs-1point5 {
  -ms-flex: 0 0 10%;
  flex: 0 0 10%;
  max-width: 10%;
}

以上css值并不精确，但是您可以将其更改为自定义宽度，并确保所有％值都相同。

Answer 3

请在<div class="col col-xs-1">上添加一个课程，并在css

中告诉您该课程的宽度

<div class="col col-xs-1 small_width">
        <input type="checkbox" name="delete[]" />
    </div>

    <div class="col col-xs-11">
    ...
    </div>
<style>
.small_width{
  width:30px;
}
</style>

Answer 4

试试这个..

<div class="row">
    <div class="col-xs-2">
      <div class="row">
        <div class="col-xs-1"><input type="checkbox" name="delete[]"></div>
        <div class="col-xs-1">
          <button class="btn btn-default">Text</button>
        </div>
      </div>
   </div>
</div>

您可能还会发现此24列网格示例很有用..

http://www.bootply.com/113382

Answer 5

如果您使用复选框，则无需在下方添加col更正格式。

<div class="checkbox">
 <input type="checkbox" value="">
 <button type="submit">Sign in</button>
</div>

来源：http://getbootstrap.com/css/#forms-controls

请参阅复选框部分。