我是初学者，在尝试对齐img（#logo）和旋转木马（#my-slider）时遇到了障碍 - 两者都位于#img-header。
在它们下面有一个导航栏，下面有一些文字。这个网站的最大宽度应该是1000px（img的宽度是350px，旋转木板的宽度是630px，所以可以说它们都在1000px以下），但是当试图对齐它们时，旋转木马跳下标志。如果我尝试仅使用导航栏和文本对齐轮播，float:left可以正常工作（如果我将最大宽度更改为1060），则float:right根本不起作用 - 它会向右移动，无论我如何改变最大宽度。所有3，navbar，text和img-header应该同样宽。 img和carousel＆＃34;同意＆＃34;只有当我将最大宽度设置为1880时才能处于同一行，这也使得左侧的杆不会居中。我也尝试将max-width设置为1000并将徽标浮动到左侧，将旋转木马浮动到右侧，但它也不起作用 - 如果我将两个浮动到同一侧（例如，两个{ {1}}。
This is how the website is supposed to look like- with this in the center.
HTML：
float:left;CSS：
<div id="img-header">
<img id="logo" src="logo/logo3.png" style="width:350px;height:240px">
<div class="container">
<div class"row">
<div class="col-sm-12">
<div id="my-slider" class="carousel slide" data-ride="carousel" style="width:630px;height:240px">
<!-- indicators, small dots -->
<ol class="carousel-indicators">
<li data-target="#my-slider" data-slide-to="0" class="active"></li>
<li data-target="#my-slider" data-slide-to="1"></li>
<li data-target="#my-slider" data-slide-to="2"></li>
</ol>
<!-- wrapper for slides -->
<div class="carousel-inner" role="listenbox">
<div class="item active">
<img src="food/food1.jpg" alt="food 1">
</div>
<div class="item">
<img src="food/food2.jpg" alt="food 2">
</div>
<div class="item">
<img src="food/food3.jpg" alt="food 3">
</div>
</div>
<!--navigations/ next and prev buttons -->
<a class="left carousel-control" href="#my-slider" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<!--<span class="sr-only">Previous</span>-->
</a>
<a class="right carousel-control" href="#my-slider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<!--<span class="sr-only">Previous</span>-->
</a>
</div>
</div>
</div>
</div>
</div>
我知道我只是一个乞丐，所以我可能犯了很多错误，请提前原谅我。
提前感谢您的所有帮助和建议！
答案 0 :(得分：1)
您有Probs：
我想我已经发现了你的一些主要问题。首先，您的=类声明中有一个拼写错误（div.row＆＃39;等号＃）;
最大的问题是你的结构。我建议你进一步阅读bootstrap，以及如何使用以下链接。
另外，我很难确定你的主要目标是什么，因此你有3个版本都做不同的事情。如果我弄错了或忘了某件事，请告诉我。
这就是我的所作所为：
我继续使用生成器（下面链接）重建了HTML结构。我认为这样可以，因为你可能应该第二次重新构建（是，再次使用文档，如果你想学习如何工作）第二次布局。
演示：
http://codepen.io/anon/pen/VjdRJK（第1版）http://codepen.io/anon/pen/QExPmP（第2版）http://codepen.io/anon/pen/PzaLwk（第3版）
进一步阅读：
Bootstrap）Bootstrap的快速细分（下）
Bootstrap的快速细分： Bootstrap是一个非常漂亮的系统，但我经常看到它过于复杂并且此后使用不正确。我认为如果我们简化Bootstrap实际上的内容以便为问题带来一些清晰度，那将会很有帮助。如果要求，我会写更多。
首先关闭：
Bootstrap是 framework ：
Bootstrap只是只是一个预先建立的基础结构，代码就是建立起来的。Bootstrap旨在自定义。此链接将向您显示：http://getbootstrap.com/customize/（为方便起见，也放在列表中）jQuery个插件或Javascript Component。 HTML，CSS和Javascript 考虑一下这个类比：最好使用一个具体的基础来构建一个建筑物 - 虽然它确实可以建造一个房子一个房子如果没有一个坚如磐石的地面嵌入式混凝土基础，它肯定不会适应＆amp;在未来的土地过时和变化的风暴中存活下来。
背后的意义：并非如果没有它们就无法创建出色的前端演示文稿，但像
Bootstrap这样的框架完全摇摆不定。它们解决了许多与可能意外结果相关的潜在问题和问题，它们处理了许多重复的前缀代码，并且它们非常灵活：能够定制，减少，增强等等。经常被忽视：一个隐藏的
gem/好处是Bootstrap（非常类似于其他广泛使用的framework/系统，例如{{1} }，Drupal或Magento）固有地创建了一套可靠（通常）一致的标准，这些标准对于（几乎）每个人都很容易遵守（大多数人甚至不知道）但是（几乎）每个人都很容易理解（比如在StackOverflow上调试其他人时）。
Wordpress只是有一堆额外的东西：他们并不确切知道你所做的任何事情，但是他们已经做了一个非常好的假设，它无疑包括使用 Bootstrap系统，grid和一些image s component s或jumbotron秒。该选项由您自行完成（并且）不包含在您的自定义callout下载中。
就是这样。这些都是基础知识。除了一些出色的创新洞察力，其创作者的礼貌之外，没什么可疯狂的。虽然它比你可信赖的Bootstrap和CSS Reset处理得更多，但如果你把它当作超级代码上的CSS Normalize来对待它，那就不那么令人生畏了类固醇。
这就是全部！
答案 1 :(得分：0)
bootstrap的文档包含所有内容。你只需要寻找它。 http://getbootstrap.com/css“
我认为您的问题可以通过
解决<div class="row">
<div class="col-md-4">
<!--Logo Comes here-->
</div>
<div class="col-md-8">
<!--Carousal Comes here-->
</div>
</div>