Question

我目前有3个内联按钮。我在如何设置这些按钮的样式时遇到问题，因此自动计算宽度以获取父div的宽度。例如，如果父div为1000px，我希望内联按钮的宽度为1000/3 - 设置边距以隔开这些按钮。所以需要考虑那些将被修复的问题。 Catch是，第一个和最后一个元素不应分别具有左边距和右边距。这样我可以动态添加按钮，样式应该照顾宽度。希望有帮助吗？

JsFiddle

HTML：

<div class="row" style="width: 1000px;border: 1px solid #999;">
  <div class="row" style="padding-bottom:20px;">
    <a href="1" class="btn-lg btn-default">My Button</a>
    <a href="2" class="btn-lg btn-default">My Button2</a>
    <a href="3" class="btn-lg btn-default">My Button3</a>
  </div>
</div>

Answer 1

您可以使用表格如下：

＆＃13;

    CGRect inputExtent = [self.inputImage extent];
    CIVector *extent = [CIVector vectorWithX:inputExtent.origin.x
                                           Y:inputExtent.origin.y
                                           Z:inputExtent.size.width
                                           W:inputExtent.size.height];
    CIImage* inputAverage = [CIFilter filterWithName:@"CIAreaAverage" keysAndValues:@"inputImage", self.inputImage, @"inputExtent", extent, nil].outputImage;

    //CIImage* inputAverage = [self.inputImage imageByApplyingFilter:@"CIAreaMinimum" withInputParameters:@{@"inputImage" : inputImage, @"inputExtent" : extent}];
    EAGLContext *myEAGLContext = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
    NSDictionary *options = @{ kCIContextWorkingColorSpace : [NSNull null] };
    CIContext *myContext = [CIContext contextWithEAGLContext:myEAGLContext options:options];

    size_t rowBytes = 32 ; // ARGB has 4 components
    uint8_t byteBuffer[rowBytes]; // Buffer to render into

    [myContext render:inputAverage toBitmap:byteBuffer rowBytes:rowBytes bounds:[inputAverage extent] format:kCIFormatRGBA8 colorSpace:nil];

    const uint8_t* pixel = &byteBuffer[0];
    float red   = pixel[0] / 255.0;
    float green = pixel[1] / 255.0;
    float blue  = pixel[2] / 255.0;
    NSLog(@"%f, %f, %f\n", red, green, blue);


    return outputImage;
}

@end

＆＃13;

然后根据需要添加尽可能多的<table style="width:100%;"> <tbody style="width:inherit;"> <tr> <td>Left</td> <td>Centre</td> <td>Right</td> </tr> </tbody> </table>元素。

Answer 2

如果您正在使用 bootstrap ，则必须了解网格系统。有col-xs-...，col-sm-...，col-md-...，col-lg-...来处理列宽。因此不要设置宽度。阅读bootstrap grid options以了解基础知识。屏幕的整个宽度为总共12列。例如，较小显示器中的col-xs-12填充整个宽度。

<强> HTML

<div class="row">
    <div class="col-..."></div>
    <div class="col-..."></div>
    <div class="col-..."></div>
</div>

<div class="row myButtons">
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">   
        <a href="1" class="btn btn-lg">My Button</a>
    </div>
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">   
        <a href="1" class="btn btn-lg">My Button2</a>
    </div>
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">   
        <a href="1" class="btn btn-lg">My Button3</a>
    </div>
</div>

此处所有设备尺寸每个部分都有4列。总共12个。（例如，设置每个 cols-xs-4到col-xs-12并调整屏幕大小以查看会发生什么！）。这是 bootstrap 工作的方式。

Example

Answer 3

假设您忽略了引导程序标准，并希望自定义样式。

试

.row {
    /*width: 1000px;*/
    border: 1px solid #999;
}
.row .row {
    padding-bottom: 20px;
    margin 0 -10px; /*offset the left and right gutter*/
}

.btn-default {
    display: block;
    float: left;
    text-align: center;
    margin: 10px; /*example margin*/
    padding: 30px;/*example padding */
    /*width: 30%;*/ /*fall back if needed*/
    width: Calc((100% / 3) - 20px); /*minus 2 x margin*/

}

JSFiddle

Answer 4

KingKongFrog。你好，我们又见面了。当您将宽度设置为固定值（如1000px）时，您将失去响应能力。尝试使用百分比。当使用Bootstrap时，xs开始大约700px，如果你并排说3个按钮，你可能会遇到在320px这样的小屏幕上安装它们的问题。
所以你需要从bootstrap css接管一些想要做的事情我添加了一些引导类，还添加了一些自定义类，以帮助显示您可能需要在此处执行的操作使用@media (max-width: 320px)是您可能需要控制的主要宽度，例如减小按钮/字体等的大小。如果在320px的屏幕尺寸上显示任何col-xs-offset-X，您将需要重置这些为零左等。

您希望/需要超越的自定义CSS需要将Bootstrap置于页面中的bootstrap下方。

查看 Fiddle here 并尝试调整其大小。

以下是 full screen fiddle view ，可以轻松调整大小。

<br>
<div class="container bg-info">
 <br>   
<div class="col-lg-12 bg-warning"> 
<br>    
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 
col-lg-offset-2 col-md-offset-2 col-sm-offset-1 col-xs-offset-2 
col-xxs-pull-1">   
<a href="1" class="btn btn-sm bg-primary btn-size">My Button1</a>
 </div>

<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3
col-lg-offset-0 col-md-offset-0 col-sm-offset-1 col-xs-offset-0
.col-xxs-offset-1">   
<a href="1" class="btn bg-primary btn-size">My Button2</a>
</div>

<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3
col-lg-offset-0 col-md-offset-0 col-sm-offset-1 col-xs-offset-0
col-xxs-push-1">   
<a href="1" class="btn bg-primary btn-size">My Button3</a>
</div>
<br><br>    
</div> 
<br>     
</div>

根据父宽度自动调整内联按钮的宽度

4 个答案: