标签: grid-layout
Bootstrap 4,如何使col高度为100%？
如何使列占据浏览器w引导4的100%高度？
请参阅以下内容:https://codepen.io/johnpickly/pen/dRqxjV
注意黄色div,我需要这个div /列占据100%的高度...有没有办法让这个发生而不必让所有父div的高度为100%？
谢谢
HTML:
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-4 hidden-md-down" id="yellow">
XXXX
</div>
<div class="col-10 col-sm-10 col-md-10 col-lg-8 col-xl-8">
Form Goes Here
</div>
</div>
</div>
css3 grid-layout twitter-bootstrap twitter-bootstrap-4 bootstrap-4
推荐指数
解决办法
查看次数
android.support.v7.widget.GridLayout无法让它工作
我有一个Android项目,它在大多数菜单和屏幕中使用GridLayout.然而问题是从API 14及以后版本支持GridLayout.
由于我想让应用程序也可用于旧版本的android,我尝试使用Android自己的支持库GridLayout,它增加了对API 7的支持.这正是我所寻找的,但是我不能为我的生活让它工作.我尝试了所有这些解释和想法:
和更多...
无论我做什么,我是怎么做的,或者我使用的是什么IDE(无论是Eclipse ADT还是Android Studio),它总是在布局XML中给出一个错误:
The following classes could be instantiated: - android.support.v7.widget.GridLayout
With either one of these exceptions showing in the error log:
1. android.content.res.Resources$NotFoundException: Could not resolve value 0x7F080000
2. java.lang.classnotfoundexception: android.support.v7.gridlayout.R$dimen
编辑:作为参考,这是我用来创建支持gridlayout(直接从android示例程序):
<android.support.v7.widget.GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/blue"
android:padding="10dip"
app:columnCount="4"
>
<TextView
android:text="@string/string_test"
/>
<EditText
app:layout_gravity="fill_horizontal"
app:layout_column="0"
app:layout_columnSpan="4"
/>
<Button
android:text="@string/button_test"
app:layout_column="2"
/>
</android.support.v7.widget.GridLayout>
如果上述解决方案都不起作用,我可能做错了什么？有什么我想念的,也许我的原始代码有问题吗？
任何帮助表示赞赏
android grid-layout android-gridlayout android-support-library
推荐指数
解决办法
查看次数
通缉:CSS网格系统和崩溃边距
我认为这是一个艰难的.
我使用网格系统float:left.我可以用它重写它display:inline-block,但这不会改变一件事.
假设我们有两列:
<div class="row">
<div class="column">
<!-- some content here -->
</div>
<div class="column">
<!-- some content here -->
</div>
</div>
如果我将一个带有margin-top的块元素放入其中(比如<h1>),我之前会对内容进行非折叠边距.这是正常的,因为浮动元素(或显示:内联块)总是如此.
但我希望利润率下降.我尝试了很多工作,但似乎每个将两个元素放在一起的CSS会破坏上面内容的折叠边距.
我知道,我可以使用CSS来获取元素的第一个子元素以摆脱margin-top.但在这种情况下,它将不适用,因为内容是使用CMS构建的,并且在我到达元素之前可能存在任意级别的元素深度.
没有JavaScript,有没有办法做到这一点？
小提琴:http://jsfiddle.net/HerrSerker/ZSV3D/
你可以看到,保证金顶部h1和保证金底部.header不会崩溃.这是一个由手段float:left的.column.
.header {
font-size: 24px;
background: rgba(0,255,0,0.1);
}
h1 {
background: silver;
margin-bottom: 50px;
font-size: 28px;
}
.column {
float: left;
width: 50%;
background: rgba(255,0,0,0.1);
}
h2 {
background: gold;
margin-top: 50px;
font-size: 24px; …推荐指数
解决办法
查看次数
哪种布局可以做到这一点？
我正在尝试在我的应用程序中布局一些JLabel,如下例所示:
我一直有此JLabel在中间,其他的JLabel数量变量可以通过选择好的数列/行,并在空格设置一些空的JLabel,但我去从1到30我曾尝试网格布局无法获得良好的结果,并且无法找到如何使用MigLayout,任何人都有一个良好的布局解决方案或任何其他解决方案.
PS:我不想展示圆圈,只是为了表明JLabel排成一个圆圈.
推荐指数
解决办法
查看次数
试图有一个带有角度材料的卡网格
我一直试图使用角度材料制作卡片网格.所以我使用的指令是md-grid-list和md-card.但结果非常难看,而且我不确定md-row-heigh(比率)如何工作,我有文档,但它没有说太多.
这是我到目前为止所做的:http: //codepen.io/stunaz/pen/qdQwbq,我试图有一个响应网卡,甚至不确定md-grid-list是否合适.
<md-grid-list md-cols-sm="1" md-cols-md="2" md-cols-gt-md="6" md-row-height="300px" md-gutter="12px" md-gutter-gt-sm="8px">
<md-grid-tile class="gray" ng-repeat="user in users">
<md-card>
<img src="http://placehold.it/150x150" class="md-card-image" alt="user avatar">
<md-card-content>
<h2>{{user}}</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</md-card-content>
<div class="md-actions" layout="row" layout-align="end center">
<md-button>Save</md-button>
<md-button>View</md-button>
</div>
</md-card>
</md-grid-tile>
我愿意接受任何帮助.
推荐指数
解决办法
查看次数
如何使用DIVS制作带有Html和CSS的网格
我的所有div都是我的tic tac toe游戏所必需的,但是我似乎找不到更简单的方法来制作网格而没有任何边框所以它只是一个网格而不是9个正方形...我认为这是一个CSS中的问题.
<html>
<head>
<title>First Tic Tac Toe</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Tic Tac Toe</h1>
<div class="wrapper">
<div class="gameboard">
<div class="Row1">
<div id="cell1"></div>
<div id="cell2"></div>
<div id="cell3"></div>
</div>
<div class="Row2">
<div id="cell4"></div>
<div id="cell5"></div>
<div id="cell6"></div>
</div>
<div class="Row3">
<div id="cell7"></div>
<div id="cell8"></div>
<div id="cell9"></div>
</div>
</div>
<div class="button">
<button>New Game</button>
<button>End Game</button>
</div>
</div>
</body>
</html>
这里是CSS,我有9个盒子,我需要一个网格,我该怎么办？
.gameboard {
width: 330px;
height:310px;
border:3px solid white;
z-index: 1;
}
.wrapper {
width: 330px;
margin:0 auto;
}
.button …推荐指数
解决办法
查看次数
Bootstrap网格系统中列的最小宽度
我使用Bootstrap CSS跟随HTML.
<div class="row">
<div class="col-sm-4" style="min-width: 66px;">Name</div>
<div class="col-sm-1" style="min-width: 120px;">Instance name</div>
<div class="col-sm-7" style="min-width: 87px;">Due date</div>
</div>
没有'min-width',在某些情况下,第二列的宽度小于120px,并且"实例名称"不完全可见.所以我添加了'min-width',在这种情况下,行的宽度变得超过100%.最后一列被包装成新行.
我希望有自举动态列宽,并且当我减少浏览器窗口大小时,实例名称不会消失.我怎样才能实现这种行为？
推荐指数
解决办法
查看次数
如何将网格行拆分为两列？
我有3行的网格布局.如何将第3行拆分为2列.
<Grid.RowDefinitions>
<RowDefinition Height="0.75*"/>
<RowDefinition Height="0.25*"/>
<RowDefinition Height="36"/>
</Grid.RowDefinitions>
推荐指数
解决办法
查看次数
CSS网格:内容使用可用空间,但滚动时更大
我第一次使用CSS网格布局,他们很棒.但是现在,我无法控制我的一个网格单元.
我想要的是拥有一个占用现有可用空间的元素,而不是更多,当内容变得太大时滚动.我的理解是,1fr在计算其他所有内容之后,网格大小会占用可用空间的均匀数量.我尝试了各种尺寸,minmax(auto, 1fr)但无济于事 - 1fr似乎扩展到适合我不想要的内容.设置最大尺寸大小100px也不好,因为我希望大小由网格中的其他元素决定.
这是一个例子:
.container {
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr 1fr;
}
.container>div {
border: 1px solid blue;
border-radius: 5px;
}
.left {
grid-column: 1;
grid-row: 1/4;
}
.header {
grid-column: 2;
grid-row: 1;
}
.problem-child {
grid-column: 2;
grid-row: 2;
overflow-y: scroll;
}
.footer {
grid-column: 2;
grid-row: 3;
}<div class="container">
<div class="left">left<br>I don't want this one to scroll<br>this should<br>determine<br>the height …推荐指数
解决办法
查看次数
材料ui中的<Grid>导致水平滚动 - React
我正在使用由此命令安装的材料ui版本1.:
npm install -S material-ui@next
每次我想使用时,页面中都会出现不需要的水平滚动.例如,这是一个简单的代码:
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles, createStyleSheet } from 'material-ui/styles';
import Paper from 'material-ui/Paper';
import Grid from 'material-ui/Grid';
/* project imports */
import NavMenu from './Page-Parts/NavMenu';
import LoginPanel from './Login-Parts/LoginPanel';
const styleSheet = createStyleSheet('FullWidthGrid', theme => ({
root: {
flexGrow: 1,
marginTop: 0,
},
paper: {
padding: 16,
textAlign: 'center',
color: theme.palette.text.secondary,
marginTop: "3rem"
},
}));
function Login(props){
const classes = props.classes;
return (
<div className={classes.root}>
<Grid container gutter={24} …推荐指数
解决办法
查看次数