Question

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

在桌面视图上的布局应如下所示：：

在移动视图上的布局应如下所示：：

我为生成上述代码而编写的代码未按预期生成上述布局

这是我的代码...这是从我的角度应用程序中动态生成的大量自举程序行中提取的，而不是动态生成的，我将行设置为硬编码，以便读者易于理解

<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>

我如何产生超出预期的布局？

Answer 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>

如何将引导卡分为两列？

1 个答案: