代码之家 › 专栏 › 技术社区 › mindlessgreen

侧面可折叠引导板

bootstrap-4 css

mindlessgreen · 技术社区 · 6 年前

手风琴面板看起来像这样

<p>
<a class=“btn btn primary”data toggle=“collapse”href=“collapsexample”role=“button”aria expanded=“false”aria controls=“collapsexample”>
与HREF链接
& lt;/a & gt;
& lt;/p & gt;
<div class=“collapse”id=“collapse示例”>
<DIV class=“卡片正文”>
这是一些内容。
&L/DIV & GT;
&L/DIV & GT;
< /代码> 



内容显示在按钮下方。


如何将折叠面板移动到按钮的右侧?如下图所示

.


   
   
   
    
    
    
     
    
   
   
   
   
    内容显示在按钮下方。
   
   
    如何将折叠面板移动到按钮的右侧?如下所示

2 回复 | 直到 6 年前

AG_ 6 年前

如果您正在使用 bootstrap 然后用适当的方法,用 rows 和 cols . 这样,您也可以获得响应式布局。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<div class="row">
  <div class="col-auto">
    <a class="btn btn-primary btn-block" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
      Link with href
    </a>
  </div>
  <div class="col">
    <div class="collapse" id="collapseExample">
      <div class="card card-body">
        This is some content.
      </div>
    </div>
  </div>
</div>

Anuresh VP 6 年前

你可以把这个包在一个分区里,然后给学生上课 d-flex 给予 flex-grow-1 到崩溃

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<div class="d-flex">
<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
</p>
<div class="collapse flex-grow-1" id="collapseExample">
  <div class="card card-body">
    This is some content.
  </div>
</div>
</div>

推荐文章

seriously · 按钮中元素的对齐

2 年前

USK · 引导模型在我的HTML文件中不起作用

2 年前

onit · 如何在单击按钮时从页面(引导程序4)隐藏或删除搜索表单?

2 年前

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

2 年前

user9644796 · 如何检查折叠的导航栏是否打开?

6 年前

JoeSlav · 使用引导上载损坏的文件

6 年前

John · 引导程序4,表单内联未在XS视图上对齐

6 年前

J. Sparks · 奇怪的图像定位(HTML、CSS、Bootstrap)

6 年前

user9719859 · 如何在bootstrap 4中更改选择选项programmaticaly?

6 年前

im5an · 如何使用angular在单行中显示徽标和导航栏?

6 年前