Question

我在tutorial之后创建了一张html卡片。然后我添加到我的页面（使用bootstrap 3.0）。但是，文本不像在教程中那样包装。有谁知道这是为什么或如何解决这个问题？

图片

https://i.stack.imgur.com/cD9dy.png

Html代码段

        <div class="row">
            <div class="col-lg-2">
                <div class="form-group ">
                    <card [visable]="obj.one" [width]="100" [image]="obj.two" [header]="project.manager?.name" [content]="obj.four"></card>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="form-group">
                    <label class="control-label ">
                        Project Name
                    </label>
                    <div class="input-group">
                        <input class="form-control" type="text" [value]="project.name" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label ">
                        Project Number
                    </label>
                    <div class="input-group">
                        <input class="form-control" type="text" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label ">
                        Project Creator
                    </label>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="form-group">
                    <label class="control-label ">
                        Team
                    </label>
                    <div class="input-group">
                        <input class="form-control" type="text" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label ">
                        Team ID
                    </label>
                    <div class="input-group">
                        <input class="form-control" type="text" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label ">
                        Team Manager
                    </label>
                </div>
            </div>
            <div class="col-lg-3">
                <div>
                    <div class="card" style="width: 100%;">
                        <div class="container">
                            <h4><b>Project Details</b></h4>
                            <p >One team of students collected data from a                                 consumer Internet website with automobile specificatins.The summary slide shows                 the results of their linear regression analysis on car engine horsepower and average miles per gallon (MPG) ratings</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

CSS

.card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
}

.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.container {
    padding: 2px 16px;
}

Answer 1

Bootstrap container与“tutorial”container冲突。

为卡片使用特殊的容器类...

<div class="col-lg-3">
      <div>
            <div class="card" style="width: 100%;">
                  <div class="card-container">
                        ..
                  </div>
            </div>
      </div>
</div>

.card-container {
    padding: 2px 16px;
}

HTML -Card文本不包装

1 个答案: