React Bootstrap: как использовать все столбцы для небольших устройств и фиксированной ширины для средних устройств - PullRequest
Новая
       2

React Bootstrap: как использовать все столбцы для небольших устройств и фиксированной ширины для средних устройств

0 голосов
/ 26 февраля 2020

У меня есть столбец React Bootstrap, который сейчас выглядит следующим образом: 

<Col xs={12} md={3}>

Я хочу изменить его, чтобы он имел фиксированную ширину 500 для средних устройств и попытался применить

className="d-flex flex-md-grow-0 flex-md-shrink-0" но это не похоже на работу. Также я не знаю, как установить flex-basis для применения ширины 500px или мне нужно объединить его с w-500?

Большое спасибо заранее

1 Ответ

0 голосов
/ 26 февраля 2020

Вы можете установить css max-width в col-md- 

const Grid = ReactBootstrap.Grid;
const Row = ReactBootstrap.Row;
const Col = ReactBootstrap.Col;


const Hello = React.createClass({
    getInitialState() {
      return { showModal: false };
    },
  
    render() {

        
        return (
        		<Grid>
                <Row>
                    <Col className="hello" xs={12} md={12}>
                     Hello
                    </Col>
                </Row>
            </Grid>
        );
    }
});
 
ReactDOM.render(
	<Hello name="World" />,
    document.getElementById('container')
);
html, body {
  height: 100%;
}

.col-md-12 {
    max-width: 500px;
    background-color: red;
}
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'>

<div id="container"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.5/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.28.1/react-bootstrap.min.js"></script>
...