Question

我有一个React组件，我想放在屏幕的底部。它应该留在那里，不管它上面有什么。如果它上面几乎没有内容，它应该仍然存在。

我通过将style={{position: 'fixed', bottom: 0}}添加到主div

来解决了这个问题

现在，我想要一个看起来像this的网格。无论我做什么，他们最终会相互制造no sense。

我尝试了什么：bootstrap，将它们分组在divs，弹性方向等。

以下代码：

render() {
        return(
            <div style={{position: 'fixed', bottom: 0}}>
                {/*Fix elements as footer*/}

                <div style={{flexDirection:'row'}}>
                    <Button variant="raised" color="default" style={{fontSize:20, minHeight: 200}}> A </Button>
                </div>
                <div style={{flexDirection:'column'}}>
                    <Button variant="raised" color="default" style={{fontSize:20}}> A </Button>
                    <Button variant="raised" color="default" style={{fontSize:20}}> A </Button>
                </div>
                <div style={{flexDirection:'column'}}>
                    <Button variant="raised" color="default" style={{fontSize:20}}> A </Button>
                    <Button variant="raised" color="default" style={{fontSize:20}}> A </Button>
                    <Button variant="raised" color="default" style={{fontSize:20}}> A</Button>
                </div>
                <div style={{flexDirection:'column'}}>
                    <Button variant="raised" color="default" style={{fontSize:20}}> A </Button>
                    <Button variant="raised" color="default" style={{fontSize:20}}> A </Button>
                </div>
            </div>
        );
    }

我不知道，但无论我阅读多少关于造型的内容，我总是在与CSS争吵。如果有人有一些创建自定义布局的技巧，请教育我。 Bootstrap很容易创建一个简单的布局，但是我无法用css包裹它，它总是会占用大部分时间。

Answer 1

如果你想了解CSS的工作原理，这里是一个没有Bootstrap的代码：

<div class="container row">
   <div class="column flex-1">
     <button class="flex-1"> A </button>
   </div>
   <div class="column flex-1">
      <button class="flex-1"> B </button>
      <button class="flex-1"> B </button>
   </div>
   <div class="column flex-2">
      <button class="flex-1"> C </button>
      <button class="flex-1"> C </button>
      <button class="flex-1"> C </button>
   </div>
   <div class="column flex-2">
      <button class="flex-1"> D </button>
      <button class="flex-2"> D </button>
   </div>
</div>

.container {
  position: fixed;
  bottom: 0;
  width: 100%;
}

.row {
  display: flex;
  flex-direction: row;
}

.column {
  display: flex;
  flex-direction: column;
}

.flex-1 {
  flex: 1;
}

.flex-2 {
  flex: 2;
}

小提琴说明： https://jsfiddle.net/dnotkL5w/16/

flex: 1表示：“按容器指定的方向占用所有可用空间”。因此，如果容器在行中，则将占用所有可用空间宽度。

flex: 2表示“按容器指定的方向占用所有可用空间。如果容器中有flex: 1项，则其大小为其两倍”。

这是一个重心：赋予flex属性的数字将表示与其兄弟姐妹相比的组件大小比率。

Answer 2

如果您确实打算使用Bootstrap，则需要使用Bootstrap类。

这是实现这些按钮所需网格布局的一种方法：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid fixed-bottom">
    <div class="row no-gutters">
        <div class="col-sm-4">
            <div class="row no-gutters h-100">
                <div class="col-6">
                    <button type="button" class="btn btn-sm btn-block h-100 btn-outline-primary">A</button>
                </div>
                <div class="col-6">
                    <button type="button" class="btn btn-sm btn-block h-50 btn-outline-secondary">B</button>
                    <button type="button" class="btn btn-sm btn-block h-50 mt-0 btn-outline-success">C</button>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <button type="button" class="btn btn-sm btn-block btn-outline-danger">D</button>
            <button type="button" class="btn btn-sm btn-block mt-0 btn-outline-warning">E</button>
            <button type="button" class="btn btn-sm btn-block mt-0 btn-outline-info">F</button>
        </div>
        <div class="col-sm-4">
            <div class="row">
                <div class="col">
                    <button type="button" class="btn btn-sm btn-block btn-outline-dark">G</button>
                    <button type="button" class="btn btn-sm btn-block h-100 mt-0 btn-outline-primary">H</button>
                </div>
            </div>
        </div>
    </div>
</div>

btn-lg或btn-sm类可用于使按钮变大或变小。 btn-block使其成为列的全宽。行上的no-gutters删除了列填充/排水沟，h-100或h-50分别表示“高度：100％”和“高度：50％”。

以下是整行可以嵌套在另一个Bootstrap列中的方式：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3">
            col-sm-3 content
        </div>
        <div class="col-sm-9 d-flex flex-column" style="min-height: 100vh">
            col-sm-9 content
            <div class="row no-gutters mt-auto">
                <div class="col-sm-4">
                    <div class="row no-gutters h-100">
                        <div class="col-6">
                            <button type="button" class="btn btn-sm btn-block h-100 btn-outline-primary">A</button>
                        </div>
                        <div class="col-6">
                            <button type="button" class="btn btn-sm btn-block h-50 btn-outline-secondary">B</button>
                            <button type="button" class="btn btn-sm btn-block h-50 mt-0 btn-outline-success">C</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <button type="button" class="btn btn-sm btn-block btn-outline-danger">D</button>
                    <button type="button" class="btn btn-sm btn-block mt-0 btn-outline-warning">E</button>
                    <button type="button" class="btn btn-sm btn-block mt-0 btn-outline-info">F</button>
                </div>
                <div class="col-sm-4">
                    <div class="row">
                        <div class="col">
                            <button type="button" class="btn btn-sm btn-block btn-outline-dark">G</button>
                            <button type="button" class="btn btn-sm btn-block h-100 mt-0 btn-outline-primary">H</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

列上的类d-flex flex-column将其转换为弹性列，行上的mt-auto类（margin-top：auto）将该行推送到该列的底部。 style="min-height: 100vh"确保列高度至少与视口高度相同（即使父列中几乎没有任何内容，按钮也会保持在底部。）

如何在Bootstrap 4中创建自定义按钮网格？

2 个答案: