Question

我正在尝试使用bootstrap来解决样式问题。我是前端开发的新手，我希望你能帮我解决这个具体的问题。我正在对员工名单进行淘汰。对于每个员工，我创建了一种包含3个部分的卡片：部分带有名称和按钮，图片，一般信息这就是它应该是这样的：

蓝色区域中的wite条纹只是我绘制的员工的名字。

<section id="picturesSection" class="background-image" data-bind="foreach: { data: people, as: 'person'}">
    <div class="cardPositioning panel panel-primary">
        <div class="panel-heading my-panel-heading">
            <h3 class="panel-title cardTitle" data-bind="text: person.Name"></h3>
            <button type="button" class="btn btn-primary btn-xs removeButton fa fa-minus" ></button>
        </div>
        <header>
            <!--<img width="256" height="256" src="app/Images/horse.jpg">-->
            <img width="256" height="256" data-bind="attr:{src: 'app/' + person.srcImage}">
        </header>
        <footer>
            <!-- $data.firstName-->
            <p class="nameEmployeePos" data-bind="text: person.DateOfBirth"></p>
            <p class="nameEmployeePos" data-bind="text: person.Role"></p>
            <p class="nameEmployeePos" data-bind="text: person.Email"></p>
        </footer>
    </div>
</section>

和css

#picturesSection{
width: 100%; overflow: hidden;
}

.cardPositioning{
float: left;
margin:20px;
}

.background-image {
background-image: url("../Images/back.png");
width: 100%;
z-index: 10;
background-position-x: 1400px;
background-position-y: 400px;
background-repeat: no-repeat;
background-attachment: fixed;
}

.removeButton{
margin-bottom: 2px;
margin-left: 0px;
margin-right: 0px;
}

问题是如何将卡片放在卡片中，代表＆＃34;减去＆＃34;图标..我需要该按钮从数据库中删除员工。我想在蓝色空间的右上角有按钮。 Bootstrap在面板 - 主要类中有一些填充，由于员工姓名的位置（我想维护），我不想删除。想知道如果可能的话我该如何解决这些问题。提前谢谢！

Answer 1

使用Bootstrap＆＃34; pull-right＆＃34;按钮上的类，并使面板标题＆＃34;内联块＆＃34;

HTML

<section id="picturesSection" class="background-image" data-bind="foreach: { data: people, as: 'person'}">
    <div class="cardPositioning panel panel-primary">
        <div class="panel-heading my-panel-heading">
            <h3 class="panel-title cardTitle panel-title-mod" data-bind="text: person.Name"></h3>
            <button type="button" class="btn btn-primary btn-xs removeButton fa fa-minus pull-right" ></button>
        </div>
        <header>
            <!--<img width="256" height="256" src="app/Images/horse.jpg">-->
            <img width="256" height="256" data-bind="attr:{src: 'app/' + person.srcImage}">
        </header>
        <footer>
            <!-- $data.firstName-->
            <p class="nameEmployeePos" data-bind="text: person.DateOfBirth"></p>
            <p class="nameEmployeePos" data-bind="text: person.Role"></p>
            <p class="nameEmployeePos" data-bind="text: person.Email"></p>
        </footer>
    </div>
</section>

CSS

 #picturesSection{
width: 100%; overflow: hidden;

}

.cardPositioning{
float: left;
margin:20px;
    position:relative;
}

.background-image {
background-image: url("../Images/back.png");
width: 100%;
z-index: 10;
background-position-x: 1400px;
background-position-y: 400px;
background-repeat: no-repeat;
background-attachment: fixed;
}

.removeButton{
margin-bottom: 2px;
margin-left: 0px;
margin-right: 0px;
  position:absolute;
  right:0;
  top:0;
}

.panel-title-mod {
  display: inline-block;
}

请参阅此代码簿

http://codepen.io/Arshmeet/pen/oYYRLM

Answer 2

有多种方法可以做到 -

1-使用按钮上的右拉类。它扭曲了包装div。因此，将.panel-heading的高度增加到40px;

2-在删除按钮类上使用position: relative和left : 90%以获得所需结果

https://jsfiddle.net/1t13t988/

Answer 3

你可以尝试绝对位置：

    #picturesSection .panel-heading {
        position: relative;
    }

    .removeButton{
        position: absolute;
        top: 0;
        right: 0;
    }

这里是code pen

Answer 4

您是否尝试将“pull-right”类添加到按钮？

Answer 5

我建议您尝试另外一个问题中给出的答案：How can I get my Twitter Bootstrap buttons to right align?

这应该可行，但我还没有测试过：

<section id="picturesSection" class="background-image" data-bind="foreach: { data: people, as: 'person'}">
    <div class="cardPositioning panel panel-primary">
        <div class="panel-heading my-panel-heading">
            <h3 class="panel-title cardTitle" data-bind="text: person.Name"></h3>
            <button type="button" class="btn btn-primary btn-xs removeButton fa fa-minus pull-right" ></button>
        </div>
        <header>
            <!--<img width="256" height="256" src="app/Images/horse.jpg">-->
            <img width="256" height="256" data-bind="attr:{src: 'app/' + person.srcImage}">
        </header>
        <footer>
            <!-- $data.firstName-->
            <p class="nameEmployeePos" data-bind="text: person.DateOfBirth"></p>
            <p class="nameEmployeePos" data-bind="text: person.Role"></p>
            <p class="nameEmployeePos" data-bind="text: person.Email"></p>
        </footer>
    </div>
</section>

如果失败，您可以随时制作自定义CSS规则，将按钮浮动到右侧：

.cardPositioning > .panel-heading > button {
    float: right;
}

在bootstrap div

5 个答案: