Question

我想将Bootstrap 3模式锁定到窗口的右下角，如下所示：

我尝试使用top: x%; left: x% CSS移动它，但这完全打破了响应速度。无论窗口大小如何，如何将其锁定在窗口的右下角？

提前谢谢。

Answer 1

如果你想将它相对于窗口定位，你需要position:fixed;，如果你希望它在屏幕左右调整时保持正确和最低位置，那么你的工作已经完成，正如你已经注意到的那样所以请改用right和bottom。

Bootstrap已经像这样设计了这个div：

@media (min-width: 768px)
.modal-dialog {
    width: 600px;
    margin: 30px auto;
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
}

所以你需要用这个来覆盖它：

.modal.in .modal-dialog {
    position:fixed;
    bottom:0px;
    right:0px;
    margin:0px;
}

http://codepen.io/ryantdecker/pen/ZOpQOX

Answer 2

 .modal-class {
    position: absolute;
    bottom: 0;
    right: 0;
 }

这应该有用。

Answer 3

链接中的基本概念确实有效。这是一个小提琴：https://jsfiddle.net/d0nfh6kz/

import React from 'react';
import { Link } from 'react-router';

import Eyecon from '../../static/eye.svg';


class Item extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'Item';
        this.state = {
            hover: false
        };
    }
    mouseOver(){
        this.setState({hover: true});
    }
    mouseOut() {
        this.setState({hover: false});
    }
    render() {
      const { item, i } = this.props;
        return (
            <div className="grid-box" onMouseOver={this.mouseOver.bind(this)} onMouseOut={this.mouseOut.bind(this)}>
                <Link to={`/view/${item.id}`}>
                    <div className="eye-container">
                        <img src={Eyecon}/>
                    </div> 
                    <div className="grid-image">
                        <img src={item.image} alt="" className="fade-in img"></img>
                    </div>
                    <div className="columns">
                        <div className="column">
                            <h2>{item.title}</h2>
                        </div>
                        <div className="column">
                            <h3>Type:</h3>
                            <p>{item.type}</p>
                        </div>
                    </div>
                </Link>
            </div>
        )
    }
}


export default Item;

锁定自举模式到右下角？

3 个答案: