如何将引导卡分成两列？答案

【问题标题】：How to split the bootstrap card in to two columns?如何将引导卡分成两列？
【发布时间】：2020-06-29 03:40:09
【问题描述】：

在我的 Angular 9 应用程序中，我有一个使用引导卡的组件。我正在尝试在我的组件上生成此布局::

在桌面视图布局应该是这样的::

在移动端视图布局应该是这样的 ::

我为生成上述内容而编写的代码没有按预期生成上述布局

这是我的代码...这是从我的 Angular 应用程序中的大量动态生成的引导行集合中提取的，而是动态生成的，我已将这些行作为硬编码，以便读者易于理解

<div class="animated fadeIn" 
    style="margin-left: 2%;margin-right: 2%;margin-top: 2%;width: 80%;" 
    id="qgroup-div-g1">
    <div class="row">
        <div class="col-lg-12">
          <div class="card">
            <div class="card-header">              
              <div class="row" style="position: relative;">
                <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">      
                    <h5 style="text-align: left;">
                        Sample Header                  

                        <button type="button" 
                                class="btn btn-success mr-1" 
                                style="position:absolute;right: 10px;top:5px;"  
                                (click)="isCollapsed = !isCollapsed"
                                [attr.aria-expanded]="!isCollapsed">
                                <i class="mdi mdi-chevron-down"></i>
                        </button> 


                    </h5>
                </div>
              </div>    
            </div>

            <div [ngbCollapse]="isCollapsed" id="qgroup-collapse-wrapper-g1">
                <div class="card-body">
                     <ul>
                        <li>
                            <div class="row justify-content-md-center" id="row1" style="display: flex;">                
                                <div class="col-8">                        
                                    TEXT1
                                </div> 
                                <div  id="d_1" class="col-xs-auto">                     

                                    <AngularComponent  id="comp1"  
                                                value='10' 
                                                max="5" 
                                                color="blue" 
                                                size="40px"                                      
                                                (progress)="onProgress($event,'comp1', 1, 1 )">
                                    </AngularComponent>

                                </div>  
                            </div>
                        </li>
                        <li>
                            <div class="row justify-content-md-center" id="row2" style="display: flex;">                
                                <div class="col-8">                        
                                    TEXT2
                                </div> 
                                <div  id="d_2" class="col-xs-auto">                     

                                    <AngularComponent  id="comp1"  
                                                value='10' 
                                                max="5" 
                                                color="blue" 
                                                size="40px"                                      
                                                (progress)="onProgress($event,'comp1', 1, 1 )">
                                    </AngularComponent>

                                </div>  
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
    </div>
    <!--/.col-->
  </div>
</div>

如何生成超出预期的布局？

【问题讨论】：

用过material-ui？试试这个，这将照顾设备的网络响应能力。 material.angular.io
@Manjuboyz 我的应用程序的所有组件都是使用引导程序创建的也可以在材质 UI 中完成。但我的第一选择不是 Material UI 它的引导程序。请在材料 UI 中提供您的答案，谢谢

标签： html css angular twitter-bootstrap

【解决方案1】：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <style>
    /* Remove the navbar's default margin-bottom and rounded borders */ 
    .navbar {
      margin-bottom: 0;
      border-radius: 0;
    }

    /* Set height of the grid so .sidenav can be 100% (adjust as needed) */
    .row.content {height: 450px}

    /* Set gray background color and 100% height */
    .sidenav {
      padding-top: 20px;
      background-color: #f1f1f1;
      height: 100%;
    }

    /* Set black background color, white text and some padding */
    footer {
      background-color: #555;
      color: white;
      padding: 15px;
    }

    /* On small screens, set height to 'auto' for sidenav and grid */
    @media screen and (max-width: 767px) {
      .sidenav {
        height: auto;
        padding: 15px;
      }
      .row.content {height:auto;} 
    }
  </style>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>

<div class="container-fluid text-center">    
  <div class="row content">

    <div class="col-sm-8 text-left"> 
      <h1>Welcome</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <hr>
      <h3>Test</h3>
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-4 sidenav">
      <div class="well">
        <p>ADS</p>
      </div>
      <div class="well">
        <p>ADS</p>
      </div>
    </div>
  </div>
</div>

<footer class="container-fluid text-center">
  <p>Footer Text</p>
</footer>

</body>
</html>

【讨论】：

看起来您的解决方案实际上并未使用卡片。另外，我错过了为什么您的解决方案中有导航栏。