Question

我在中间有一个图像，但是如果我让屏幕变小，那么图像就会变成righ。那不是必须的。图像必须是响应式的。那么如何管理图像将保持缩放？

我有这个：

<div class="row">
    <div class="col-md-7 col-xs-12">
        <a class="logo" href="{channel.link(channel.browsestartpage())}">
            <img src="{channel.link('/designs/SFVG/Logo_Franciscus_Gasthuis_Vlietland_PAYOFF_rgb.png')}" alt="logo Frasicus gasthuis &amp; Vlietland" class="img-responsive img-right" />
        </a>
    </div>
    <div class="col-md-5  col-xs-12" >
        <form class="navbar-form navbar-right" role="search" action="{html.location(cms.getdescendantbytitle(channel.browsestartpage(),'Beheer/Meta/Zoeken',Off), Autonomous)}" method="post">
            <div class="input-group">
                <input type="text" class="form-control" name="q"  title="Type hier uw zoekterm"  placeholder="Ik zoek ..." />
                <input type="hidden" value="0" name="searchconcept" id="c"  />
                <span class="input-group-btn">
                    <button type="submit" value="{locale.getstring('search',default='Zoek')}" class="btn btn-default"><i class="icon-search"></i></button>
                </span>
            </div>

        </form>
    </div>
</div>

和css：

h1,h2,h3,h4,h5,h6,h7,h8,
.h1,.h2,.h3,.h4,.h5,.h6,.h7,.h8 {
    font-weight:700;
}
h1,.h1 {
    font-size:1.8em;
}
h2,.h2 {
    font-size:1.6em;
}
h3,.h3 {
    font-size:1.4em;
}
h4,.h4,h5,.h5,h6,.h6 {
    font-size:1em;
}

.img-responsive.img-left {
    margin-right: auto; 
}
.img-responsive.img-center {
    margin-left: auto; 
    margin-right: auto; 
}
.img-responsive.img-right {
    margin-left: auto; 
}

.right {
    float:right;
}
.left {
    float:left;
}

[class^="icon-"], [class*=" icon-"] {
    font-family: 'FontAwesome';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.flex-row {
    display:flex;
    flex-wrap: wrap;
    margin:0;
}
.stretch {
    align-self:stretch;
}

谢谢

我现在就这样：

<div class="row">
    <div class="col-md-7 col-xs-12 text-right">
        <a class="logo" href="{channel.link(channel.browsestartpage())}">
            <img src="{channel.link('/designs/SFVG/Logo_Franciscus_Gasthuis_Vlietland_PAYOFF_rgb.png')}" alt="logo Frasicus gasthuis &amp; Vlietland" class="img-responsive img-center" />
        </a>
    </div>
    <div class="col-md-5  col-xs-12" >
        <form class="navbar-form navbar-right" role="search" action="{html.location(cms.getdescendantbytitle(channel.browsestartpage(),'Beheer/Meta/Zoeken',Off), Autonomous)}" method="post">
            <div class="input-group">
                <input type="text" class="form-control" name="q"  title="Type hier uw zoekterm"  placeholder="Ik zoek ..." />
                <input type="hidden" value="0" name="searchconcept" id="c"  />
                <span class="input-group-btn">
                    <button type="submit" value="{locale.getstring('search',default='Zoek')}" class="btn btn-default"><i class="icon-search"></i></button>
                </span>
            </div>

        </form>
    </div>
</div>

和css：

h1,h2,h3,h4,h5,h6,h7,h8,
.h1,.h2,.h3,.h4,.h5,.h6,.h7,.h8 {
    font-weight:700;
}
h1,.h1 {
    font-size:1.8em;
}
h2,.h2 {
    font-size:1.6em;
}
h3,.h3 {
    font-size:1.4em;
}
h4,.h4,h5,.h5,h6,.h6 {
    font-size:1em;
}

.img-responsive.img-left {
    margin-right: auto; 
}
.img-responsive.img-center {
    margin-left: auto; 
    margin-right: auto; 
}
.img-responsive.img-right {
    margin-left: auto; 
}

.right {
    float:right;
}
.left {
    float:left;
}

[class^="icon-"], [class*=" icon-"] {
    font-family: 'FontAwesome';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a.logo { display: inline-block;}

.flex-row {
    display:flex;
    flex-wrap: wrap;
    margin:0;
}
.stretch {
    align-self:stretch;
}

Answer 1

要使用Bootstrap使图像居中，您需要在图像上使用composer update类，然后在firstNItems = [items subarrayWithRange:NSMakeRange(0, MIN(n, items.count))];类上删除center-block。

小提琴也删除了inline-block类......

Fiddle

Bootstrap几乎拥有你想要内置的大部分内容，所以你不必创建一堆你自己的类来对齐图像和文本：）

编辑：我不完全确定您要在布局中尝试完成的内容 - 因此我将所有其他内容保留原样 - 但您可以进一步清理HTML和CSS并使用它们更多Bootstrap的类来实现你想要的目标。

Answer 2

添加以下css

a.logo{
    display:block;
    width:30%;
    margin: 0 auto; 
    text-align:center;
}

在中心，引导程序中粘贴图像

2 个答案: