代码之家 › 专栏 › 技术社区 › robert trudel

并排按钮

bootstrap-4 twitter-bootstrap

robert trudel · 技术社区 · 6 年前

我试着用bootstrap 4来创建一个右边有另一个按钮drowdown的按钮

实际按钮显示在单独的行上

<div class="form-group row">
  <div class="col-sm-12">
    <div class="float-right">
      <div class="button-group ">
        <button type="button" class="btn btn-primary" id="searchSamplings">Recherche</button>
        <div class="dropdown">
          <button class="btn btn-secondary dropdown-toggle disabled" type="button" id="dropDownExports" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Exportations</button>
          <div class="dropdown-menu" aria-labelledby="dropDownExports">
            <button class="dropdown-item" type="button">Excel</button>
            <button class="dropdown-item" type="button">Pdf</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

如何让他们肩并肩?

3 回复 | 直到 6 年前

Surya Neupane 6 年前

给带有“dropdown”类的div一个自定义类,如“cust drop”,并给它一个属性 显示:内联块 以下内容:

<div class="button-group ">
    <button type="button" class="btn btn-primary" id="searchSamplings">Recherche</button>
    <div class="dropdown cust-drop">
      <button class="btn btn-secondary dropdown-toggle disabled" type="button" id="dropDownExports" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Exportations</button>
      <div class="dropdown-menu" aria-labelledby="dropDownExports">
        <button class="dropdown-item" type="button">Excel</button>
        <button class="dropdown-item" type="button">Pdf</button>
      </div>
    </div>
   </div>

在CSS中:

  .cust-drop {
     display:inline-block !important;
   }

这应该管用。

helloworld 6 年前

添加 D-flex公司 分组

class="button-group d-flex ">

Pandiyan Cool 6 年前

HTML

<div class="button-group custom-class">
...
</div>

CSS

.custom-class {
  display: flex;
}

小提琴: http://jsfiddle.net/pandiyancool/h9uy423L/

推荐文章

xajetin · 导航不更改滚动上的颜色

2 年前

Noor ul ain Ibrahim · 如何在一行中制作两个大小相同的按钮?

3 年前

Bryan Santos · 固定表头与引导

3 年前

Nicolas Berthier · Bootstrap 5基于内容的包装

3 年前

tym · 根据用户偏好显示字段

3 年前

Sheryar Khan · 如何仅使用html、css、bootstrap、javascript/jquery创建html页面?

3 年前

Pavel · 当验证DIV可见时,引导网格会移动

7 年前

Sam · 在标题中嵌入Bootstrap 3导航栏

7 年前

Alexander David · 折叠卡打开,然后立即再次关闭

7 年前

Sandeep Bhardwaj · div的一致行为,与设备分辨率无关

7 年前