bootstrap 和 html 中的响应式设计答案

【问题标题】：Responsive design in bootstrap and htmlbootstrap 和 html 中的响应式设计
【发布时间】：2014-10-07 19:07:06
【问题描述】：

我是 .net 和引导程序的新手。我正在尝试设计一个网页。但是当我看到较小尺寸的页面时，整个结构变得混乱。我在每个 col-md-6 中有一些行，我想在一行中看到自己的图像之后的文本。但在小尺寸文字下图像。请查看网页中的源代码。对不起，我的英语不好。你可以在这个地址看到页面。 [][1]

[1]：

  <div class="container">

    <div class="row ">

        <div class="col-md-6  " id="" style="background-color: #ff6a00; min-height: 650px;">

            <div class="row" style="min-height: 35%">

                <img class="img-responsive img-logo" src="img/about-us.jpg" style="transform: rotate(-10deg);" />

            </div>
            <div class="row" style="background-color: #ff6a00;min-height:550px;top:300px;">
                <div class="direction" style="color: black;">
                     <h4 style="padding-right:50px;">درباره ما</h4>
                    <br />
                    <div class=" float pading-top text-justify text">

                            <p>
                               some text
                            </p>
                        </div>
                    </div>
                </div>
            </div>


            <!----------------------------->

            <div class="col-md-6 otherbak2 " id="boss" >
                <div class="row height margin-top2 " >
                    <div class="col-md-6 height2 " >
                        <img class="img-responsive img-logo height2" src="img/png-ico/ali.JPG" />
                    </div>
                    <div class="col-md-6  height float" >
                        <p class="text-center" style="font-size: 17px; color: #d9534f">

                           some text
                             </p>
                    </div>
                </div>

                 <div class="row height margin-top2 ">

                    <div class="col-md-6 height2" >
                    <img class="img-responsive img-logo  height2" src="img/png-ico/mazdak.jpg" />
                    </div>
                    <div class="col-md-6  height float" >
                        <p class="text-center" style="font-size: 17px; color: #f0ad4e">
                             some text
                              </p>
                    </div>
                </div>

                <div class="row height margin-top2 ">
                    <div class="col-md-6 height2" >
                        <img class="img-responsive img-logo  height2" src="img/png-ico/babak.jpg" />
                    </div>
                    <div class="col-md-6 height  " >
                        <p class="text-center" style="font-size: 17px;color: #ea4619">

                             some text
                            </p>
                    </div>
                </div>
                <div class="row height margin-top2 " >
                    <div class="col-md-6 height2">
                        <img class="img-responsive img-logo height2 " src="img/png-ico/amin.jpg" />
                    </div>
                     <div class="col-md-6 height ">
                        <p class="text-center" style="font-size: 17px;color:#24a947;">
                          some text
                            </p>
                    </div>
                </div>
            </div>
            </div>

   </div>

 <style type="text/css">
    body {
        background-image: url(../img/backgrnd.jpg);
    }

    .btn2 {
        color: #fff;
        background-color: #428bca;
        border-color: #428bca;
    }

    .width {
        width: 250px;
    }

    .height {
       min-height: 190px;
    }

    .height2 {
       min-height: 100%;
    }


    a:hover,
    a:focus {
        color: #FA6210;
        text-decoration: underline;
    }

    .width {
        width: 60%;
    }

    .danger {
        color: #d9534f;
    }

    .warning {
        color: #f0ad4e;
    }

    .success {
        color: #5cb85c;
    }

    .info {
        color: #5bc0de;
    }

    .primary {
        color: #FA6210;
    }


    .btn2 {
        color: #fff;
        background-color: #428bca;
        border-color: #428bca;
    }


    .style {
        color: white;
    }

    .pading-top {
        padding-top: 30px;
    }

    .margin-top {
        margin-top: 10px;
    }

    .menu2 {
        border-bottom: 5px solid #096DB9;
        border-radius: 10px 10px 10px 10px;
    }

    .menu3 {
        border-bottom: 8px solid #096DB9;
        border-radius: 15px 15px 15px 15px;
    }

    .direction {
        direction: rtl;
        float: right;
    }

    .direction2 {
        direction: ltr;
        float: left;
    }

    .float {
        float: right;
    }

    .padding {
        margin: 50px 5% 100px 5%;
    }

    .img-size {
        height: 128px;
        width: 128px;
    }

    .fixed2-menu {
        z-index: 1;
        direction: rtl;
        float: right;
        width: 100%;
    }

    .margin-top {
        margin-top: 30px;
    }

    .margin-top2 {
        margin: 5px 0 0 0;
    }

    .text {
        padding: 0 20px 0 20px;
        line-height: 25px;
        font-size: 14px;
    }

    .opacity {
        opacity: 1.0;
    }


</style>

【问题讨论】：

如果你使用 bootstrap 设计意味着你不需要编写额外的样式，bootstrap 已经是一个完整的 css 了。你可以实现你想要的任何设计。供参考使用此链接：getbootstrap.com
首先删除您的附加样式并使用引导样式进行设计。例如使用这个链接：wrapbootstrap.com

标签： jquery html css asp.net twitter-bootstrap

【解决方案1】：

下一行将height改为min-height，防止图片落后于文字

<div style="background-color: rgb(255, 106, 0); min-height: 650px;" id="about" class="col-md-6  ">

好的开始，但你可以通过很多方式让它变得更好，问题是height 和height2 类。删除它们，一切都会好起来的。对于图片，您还有另一个名为 img-logo 的自定义类，该类也有问题。而不是将absolute定位分配给图片尝试pull-left

见下文，我更改了其中一个代码块

<div class="row height margin-top2 ">
     <div class="col-md-6 ">
           <img src="img/png-ico/ali.JPG" class="img-responsive pull-left">
     </div>
     <div class="col-md-6  ">
          <p style="font-size: 17px; color: #d9534f" class="text-center">
                رییس هیئت مدیره    
                        <br>
                علی کولیوند
           </p>
     </div>
</div>

ps: sibil gashhangha ;)

【讨论】：

我想把“我的文字”放在图片之后，但是，它放在图片下面，我看不到部分文字。 tnx 为 min-height 。它解决了一些问题。

【解决方案2】：

正如 cmets 所建议的，您不需要创建所有的 css。一般来说，引导样式可以分为 2 / 3 类。（至少在我看来）

DOM 基础设施[row, col-lg-12, etc..]
组件/元素[form-control, form-group, btn, etc..]
风格[btn-primary btn-warning]

例如，您可以更改与样式相关的部分、EG、按钮颜色、字体大小（在一定程度上）、更换图标集，并且您将在基础架构方面保持安全。

您还必须注意的是，您始终需要每行最多 12 列。 EG

<div class='row'>
   <div class='col-md-7'></div>
   <div class='col-md-5'></div>
</div>

在您提供的示例中，您的某些 html 标记看起来可能未对齐。这可能会让你有些心痛。我还摆脱了一些自定义浮动类。

你的例子

 <div class="row height margin-top2 " >
   <div class="col-md-6 height2 " >
      <img class="img-responsive img-logo height2" src="img/png-ico/ali.JPG" />
   </div>
   <div class="col-md-6  height float" >    
        some text                  
   </div>
 </div>

这里的问题是您将右列浮动...这听起来很奇怪。你不需要。

如果我正确理解问题，您可以解决您的问题。

CSS

.text-padding {
   text-align: right;
   vertical-align: middle;
   padding-top: 80px; // half of your image size 190px
}

HTML

<div class="row height margin-top2 " >
    <div class="col-md-6 height2 " >
        <img class="img-responsive img-logo height2" src="img/png-ico/ali.JPG" />
    </div>
    <div class="col-md-6 height text-padding" >    
         some text                  
    </div>
</div>

【讨论】：